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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
原生JS实现层叠轮播图
May 17 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
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
一个目录遍历函数
2006/10/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
深入浅析python with语句简介
2018/04/11 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python Selenium截图功能实现代码
2020/04/26 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
学校联谊活动方案
2014/02/15 职场文书
詹天佑教学反思
2014/04/30 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
校长个人总结
2015/03/03 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python