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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
常用的javascript function代码
May 23 Javascript
jQuery 动画基础教程
Dec 25 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
React props和state属性的具体使用方法
Apr 12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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 读取Postgresql中的数组
2013/04/14 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
JS模板实现方法
2013/04/03 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python学习 流程控制语句详解
2016/06/01 Python
Python操作json的方法实例分析
2018/12/06 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
母亲节主题班会
2015/08/14 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书