js实现在网页上简单显示时间的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 一个php+js实时显示时间问题

    我们先来看下这段代码 $(function(){ setInterval(function(){ var timer = '<?php echo date("Y-m-d H:i:s",time()) ?>'; $("#test").append(timer); },500); }); 这段代码哪里有问题,为啥网页加载后网页一直是那个时间不会变呢?php和js的加载机制有啥不同? 这样是不对的,php代码在输出前被解释,浏览器收到的代码应该是这个样子的 $

  • js+数组实现网页上显示时间/星期几的实用方法

    复制代码 代码如下: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m

  • asp.net转出json格式客户端显示时间

    在服务器端利用 JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(obj); 对对像序列化, 对于时间类型得出结果为:\/Date(1216796600500)\/ 客户端解析的方式为: 复制代码 代码如下: function renderTime(data){ var da = eval('new ' + data.replace('/','','g').repla

  • js显示时间 js显示最后修改时间

    本实例将实现显示网页文件最后的修改时间.首先在页面添加了一个文本框控件,然后使用javascript创建了一个函数,在函数中调用document对象的lastModified属性,然后在页面的文本框中显示文件上一次被修改的时间,通过这种方法可以查看网页的更新时间. 实现过程: 1.编写自定义函数,代码如下: 复制代码 代码如下: <script language="javascript"> function alterdate() { document.form1.text

  • JS小功能(setInterval实现图片效果显示时间)实例代码

    JS小功能(setInterval实现图片效果显示时间)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript">        function toDou(n) {            if (n < 10) {                return '0' + n;            }            else {

  • js实现在网页上简单显示时间的方法

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

  • JS实现浏览器状态栏显示时间的方法

    JS实现浏览器状态栏显示时间的方法

    本文实例讲述了JS实现浏览器状态栏显示时间的方法.分享给大家供大家参考,具体如下: 以前做个人主页的时候,总喜欢把自己的网页搞的很个性,在网上做跑马灯文字,在状态栏显示问候语,或者在状态栏添加时间显示,本代码就是实现了状态栏显示当前时间的物资,火狐没测度,IE下效果完美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-time-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "

  • 通过js脚本复制网页上的一个表格的不错实现方法

    今天有人问我一个问题:如何通过js脚本复制网页上的一个表格?看起来似乎比较有难度,不过还是搞定了,顺便把解决这个问题的过程记录下来,希望能对写脚本的兄弟们有所帮助. 以前没有写过这种脚本,不过想起来前不久刚看到一个脚本可以实现全选HTML编辑器的内容,于是想到一个方案:使用脚本将该表格插入HTML编辑器中,然后全选HTML编辑器内容,执行HTML编辑器的复制命令,即可实现复制表格功能,很快搞定: 测试 测试表格 测试表格 测试表格 测试表格 文字 "); // 初始化编辑器 editor.doc

  • js使用DOM操作实现简单留言板的方法

    js使用DOM操作实现简单留言板的方法

    本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

  • java采用中文方式显示时间的方法

    本文实例讲述了java采用中文方式显示时间的方法.分享给大家供大家参考.具体如下: 其中t为秒,比如有时候需要计算两个任务相差多久,或者该任务何时结束或者某个任务间隔多久重新启动等适用于本方法.如果是微秒,自己先/1000 private static String chinese_period(int t){ int y, n, d, h, m, s; String time; if(t<=0) return "立即"; s = t % 60; t /= 60; m = t %

  • ASP.NET网站实时显示时间的方法

    本文实例讲述了ASP.NET网站实时显示时间的方法.分享给大家供大家参考.具体方法如下: 在ASP.NET环境中开发设计网站或网络应用程序时,往往需要实时显示当前日期和时间.这时,通常使用AJAX控件来实现. 需要注意的是,在.NET Framework 2.0版本中,工具箱中是没有AJAX Extensions控件的.而.NET Framework 3.5版本中集成了AJAX. ASP.NET AJAX包括三部分: ①一个扩展客户端JavaScript功能的客户端库或框架: ②一个允许ASP.

  • JS实现点击循环切换显示内容的方法

    JS实现点击循环切换显示内容的方法

    本文实例讲述了JS实现点击循环切换显示内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击循环切换内容</title> <style> a { cursor: pointer; colo

  • JS实现在网页中弹出一个输入框的方法

    本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas

  • Python简单格式化时间的方法【strftime函数】

    本文实例讲述了Python简单格式化时间的方法,分享给大家供大家参考,具体如下: walker经常用到当前时间和相对时间,用来统计程序执行的效率,简单记一下,便于copy. >>> import time >>> startTime = time.time() >>> '%.2fs' % (time.time() - startTime) #相对时间 '24.51s' >>> '{:.2f}s'.format(time.time()

  • Python获取网页上图片下载地址的方法

    本文实例讲述了Python获取网页上图片下载地址的方法.分享给大家供大家参考.具体如下: 这里获取网页上图片的下载地址是正在写的数据采集中的一段,代码如下: 复制代码 代码如下: #!/user/bin/python3 import urllib2 from HTMLParser import HTMLParser class MyHtmlParser(HTMLParser):     links = []     def handle_starttag(self, tag, attrs):  

随机推荐