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 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
js和jquery中获取非行间样式
May 05 jQuery
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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 高手之路(二)
2006/10/09 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
python__name__原理及用法详解
2019/11/02 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
给交警的表扬信
2014/01/12 职场文书
同学会主持词
2014/03/18 职场文书
银行职员自我鉴定
2014/04/20 职场文书
管理提升方案
2014/06/04 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB