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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
微信小程序实现轮播图指示器
Jun 25 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统计字符串中中英文字符的个数
2013/06/23 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php-msf源码详解
2017/12/25 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python中的decorator的作用详解
2018/07/26 Python
python贪吃蛇游戏代码
2020/04/18 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
行政助理岗位职责
2013/11/10 职场文书
高中数学教学反思
2014/01/30 职场文书
新郎答谢词
2015/01/04 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
个人收入证明格式
2015/06/24 职场文书