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中的闭包浅谈
Aug 23 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
详解vue axios二次封装
Jul 22 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
YII框架关联查询操作示例
2019/04/29 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
中式结婚主持词
2014/03/14 职场文书
保护环境建议书300字
2014/05/13 职场文书
教师工作表现评语
2014/12/31 职场文书
毕业典礼主持词
2015/06/29 职场文书
2016年国陪研修感言
2015/11/18 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
python自动计算图像数据集的RGB均值
2021/06/18 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL