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 相关文章推荐
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue请求数据的三种方式
Mar 04 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python 学习笔记
2008/12/27 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
毕业生对母校寄语
2015/02/26 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
python lambda 表达式形式分析
2022/04/03 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python