js实现在网页上简单显示时间的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现在网页上简单显示时间的方法。分享给大家供大家参考。具体如下:

这是一款网页时钟JS代码,纯javascript实现,显示时、分、秒。网页时间显示、网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易网页时钟</title>

<style>

body,div{margin:0;padding:0;}

body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}

#clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}

span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

</style>

<script>

window.onload = function ()

{

var oClock = document.getElementById("clock");

var aSpan = oClock.getElementsByTagName("span");

setInterval(getTimes, 1000);

getTimes();

function getTimes ()

{

var oDate = new Date();

var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];

for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])

}

function format(a)

{

return a.toString().replace(/^(\d)$/, "0$1")

}

}

</script>

</head>

<body>

<div id="clock">

<span></span>点<span></span>分<span></span>秒

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
jQuery实现元素的插入
Feb 27 Javascript
video.js使用改变ui过程
Mar 05 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #Javascript
You might like
PHP学习笔记之session
2018/05/06 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Jquery之美中不足小结
2011/02/16 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
详解python进行mp3格式判断
2016/12/23 Python
python添加模块搜索路径方法
2017/09/11 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
会计出纳岗位职责
2013/12/25 职场文书
测量工程专业求职信
2014/02/24 职场文书
夜不归宿检讨书
2014/02/25 职场文书
教师节演讲稿
2014/05/06 职场文书
单位承诺书格式
2014/05/21 职场文书
经费申请报告
2015/05/15 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
创业计划书之面包店
2019/09/17 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang