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编码、解码函数介绍及其使用示例
Sep 05 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
超市客服工作职责
2014/06/11 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
委托公证书样本
2015/01/23 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
佛光寺导游词
2015/02/10 职场文书
学生检讨书怎么写
2015/05/07 职场文书
无保留意见审计报告
2015/06/05 职场文书
子女赡养老人协议书
2016/03/23 职场文书
公开致歉信
2019/06/24 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript