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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
破解Session cookie的方法
2006/07/28 Javascript
新浪中用来显示flash的函数
2007/04/02 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue中的provide/inject的学习使用
2018/05/09 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
论群众路线学习心得体会
2014/10/31 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
离婚财产分割协议书
2015/08/11 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Python中的 enumerate和zip详情
2022/05/30 Python