位置:首页 » 教程 » js实现在网页上简单显示时间的方法

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

日期:2015-02-28 阅读:0num
Advertisement

这篇文章主要介绍了js实现在网页上简单显示时间的方法,实例分析了javascript实时显示时间的技巧,需要的朋友可以参考下

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

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

    这篇文章主要介绍了js实现在网页上简单显示时间的方法,实例分析了javascript实时显示时间的技巧,需要的朋友可以参考下 本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

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

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

  • 运行此js时提示网页上有异常,请教错在哪里

    运行此js时提示网页上有错误,请问错在哪里? <script language= "javascript " type= "text/javascript "> function page(value){ var $s = location.search; var $t; if ( value > 0) { $s.indexOf( "page= ") > 0 ? $t = $s.replace(/page=([0-9]{0

  • extJS  Helloword  网页上不显示解决方法 extJS Helloword 网页上不显示解决方法

    extJS Helloword 网页上不显示 直接贴代码,麻烦各位指点下,刚接触,确实不懂. ExtTry.html: <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" type="text/css" href="../../resourc

  • 利用JS代码在网页上绘图,该怎么处理

    利用JS代码在网页上绘图 目前我学习制作一个利用C#浏览器控件,通过代码和网页中的JS代码交互,使得网页上动态绘制图形. 主要只用画出简单的点,线段即可. 我之前了解到,利用html5的canvas可以实现该功能,如moveto lineto, 但是我发现canvas必须使用IE9以上才可以, 我想用使用更低版本的浏览器也可以兼容, 所以想请问有没有其他方法实现我所说的功能. 分享到: ------解决方案-------------------- 如果只需要支持IE浏览器的话,建议采用VML,绝

  • html在一个网页上不能显示两个浮动窗口,该怎么解决

    html在一个网页上不能显示两个浮动窗口 <html> <body> <h1>hello,world</h1> <iframe name="iframe2" src="http://www.baidu.com" width="500px" height="300px"> <iframe name="iframe1" src="htt

  • Win10系统打开浏览器要很久网页才会显示的解决方法 Win10系统打开浏览器要很久网页才会显示的解决方法

    最近,有Win10系统的用户在家里使用路由器的局域网上打开IE浏览器,浏览器网页的时候,总是要等待很久才会显示网页,这样很是浪费时间啊!遇到这样的问题,我们应该如何处理呢?今天,红黑联盟小编就和大家说一下Win10局域网打开IE浏览器要很久网页才会显示的解决方法. 来源自 红黑联盟 ,转载请注明. 具体方法如下: 1.打开"Internet 选项"(打开IE浏览器"Internet选项"窗口的方法),切换到"连接"选项卡; 2.点击"局

  • 用js改变框架网页的location有二种方法

    用js改变框架网页的location有2种方法 js框架网页,改变框架的location有2种方法: 方法一: top.mainFrame.location.href = url; 方法二: var doc = parent.document; doc.getElementsByTagName("frame")["mainFrame"].src=url; 比较: 当框架网页mainFrame调用了其他系统的纯flash页面,然后再通过菜单子框架页面的js调用其他页面

  • Word2010过滤网页上的超链接和图片方法 Word2010过滤网页上的超链接和图片方法

    我们时常会在某些网站上找一些自己想要的资料,但是许多网站上都有各种各样的格式.超链接.图片等,复制到Word里面后你会发现连同这些样式全部都粘贴到文档里面了.我们要的纯文本形式的,如果手工去除这些样式工作量可不小,而且又麻烦.怎样可以直接复制网页里面的内容时只粘贴纯文本到文档中,而且都将这些超链接.图片等样式全部过滤掉呢?下面就来为大家详解操作吧! Word2010过滤网页上的超链接和图片方法: 方法一:先复制网页上带样式的内容,然后进入Word2010界面,单击左上角的"粘贴"箭头按

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

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

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

    这篇文章主要介绍了JS实现在网页中弹出一个输入框的方法,实例分析了prompt的用法,可用来设置密码,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  • win7系统设置进入锁屏可以显示时间的方法 win7系统设置进入锁屏可以显示时间的方法

    如果离开电脑一段时间后,Win7系统会自动进入锁屏状态,这样不仅可以保护系统安全,还可以节约电源等等.屏保有"变换线"."彩带"."气泡"."三维文字"."照片"几样选择.那么有什么办法可以让win7系统进入锁屏可以显示时间呢?下面小编告诉大家具体的设置方法. 具体步骤: 1.首先下载"Fliqlo"时间屏保程序;点击下载Fliqlo 2.下载完成后单击右键选择"解压到当前文件

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 小米手环显示时间的方法

    首先,考虑到小米手环有三个灯,目前知道四种颜色组合(没有手环灯的资料,目前只知道有四种颜色,如果谁有资料希望提供一下),想到以下 二进制和十进制两种方案-- 先说十进制方案: 小时:由于三个灯,四种颜色,相乘正好为十二,可以规定依次从 1小时到12小时为 蓝橙绿红,(即 蓝色亮一个灯是一点,蓝色亮两个灯是两点,蓝色亮三个灯是三点,橙色亮一个灯是四点,橙色亮两个灯是五点,橙色亮三个灯是六点,绿色亮一个灯是七点,绿色亮两个灯是八点---累死了,不说了,一直到十二点) 分钟:和小时一样,只不过十二种组

  • 延长Win10通知消息显示时间的方法 延长Win10通知消息显示时间的方法

    第一步.点开开始菜单,点击选择里面的"设置". 第二步.在设置界面,点击"轻松使用". 第三步.在随后出现的界面,点击左侧面板"其他选项"在右侧窗口,找到"通知消息显示时间"项目,点击后面的向下箭头,在里面的选项中,选择自己认为合适的显示时间即可!

  • 三星S5如何设置按键灯显示时间?S5按键灯显示时间设置方法 三星S5如何设置按键灯显示时间?S5按键灯显示时间设置方法

    三星S5系列的手机有一个按键背景灯效果,有些朋友不喜欢默认时长了,那么我们可不可以修改按键背景灯时间长度了,下面我就来给各位同学详细介绍S5系列手机按键背景灯设置方法,有兴趣的朋友. 1.待机页面下,点击[应用程序]. 2.点击[设定]. 3.点击[显示]. 4.点击[触摸按键灯持续时间]. 5.选择您所需设定的按键灯持续显示时间,这里以选择[6秒]为例.(若选择[始终关闭]后,按键灯将被彻底关闭,若选择[始终开启]后,按键灯将持续长亮.) 当然如果你学喜欢这个指示灯的话我们可以直接关闭了这样也

  • 三星N7102/SCH-N719浏览网页时不显示图片解决方法 三星N7102/SCH-N719浏览网页时不显示图片解决方法

    浏览网页时不显示图片是三星手机为了给用户节省浏览而自动设置了,如果你想在浏览网页时可以查看图片我们可以参考下面方法来解决浏览网页时不显示图片问题. 请按照以下步骤操作: 1.在待机页面下,点击[应用程序]. 2.选择[互联网]. 3.打开互联网后,点击左下方[菜单]键,选择[设定]. 4.点击[带宽管理]. 5.将[载入图像]打钩. 以上操作后,当您再次浏览网页时,图片就可以正常显示了. 注:如果您使用第三方浏览器上网,图片显示选项请查看第三方软件相关设置.

  • pb11.5的程序 在server2003操作系统上不显示菜单解决方法

    pb11.5的程序 在server2003操作系统上不显示菜单 pb11.5的程序 在server2003操作系统上不显示菜单 在别的机器上都可以 而且在别的server2003操纵系统运行也没问题 就在客户的服务器上显示不出菜单的文字,但在那台机器上 pb9.0的程序菜单都能显示 求大神帮忙分析分析 怎么处理啊~~~ --cut-- 重新安装系统就行吧

  • shell上获取系统时间的方法

    shell下获取系统时间的方法 直接调用系统变量 获取今天时期:`date +%Y%m%d` 或 `date +%F` 或 $(date +%Y%m%d) 获取昨天时期:`date -d yesterday +%Y%m%d` 获取前天日期:`date -d -2day +%Y%m%d` 依次类推比如获取10天前的日期:`date -d -10day +%Y%m%d` 或n天前的 `date -d "n days ago" +%Y%m%d` 或`date --date='n day ag

  • 如果想在网页上格式化显示一个javascript/json对象,标准的做法应该是什么?

    1.拼接html: var str = '<li>'+obj.aaa+'</li>'; ...... 2.构造dom document.createElement .... 或 $('div')..... 3.其他办法? 那种办法更好用? 标准是方便.安全.高效. 有没有现成的库或者是别的什么可以专门做这些事情? --cut-- Kenyth在2011-07-25 23:27:5回答到: 你所谓的格式化是什么,有标准的缩进和换行么?还是像 firebug 里面的 DOM tree

最新文章
  • 利用dns解析来实现网站的负载均衡 利用dns解析来实现网站的负载均衡

    当网站的访问量大了就会考虑负载均衡,这也是每一个架构师的基本功了,其基本地位就相当于相声里的说学逗唱,活好不好就看这个了 :) 传统的负载均衡思路是单点的,不管你是硬件的还是软件的基本都是这样的原理 对于一般的需求来说,这样的架构基本就可以解决问题了.而且维护起来也相对简单.嗯,大多数公司也都是这么干的. 传统思路的局限性 就如同上图所示,传统思路也存在非常明显的局限性.也就是网站的响应速度很大程度上局限于负载均衡节点的能力,而且一旦负载均衡节点本身挂掉的话,整个网站就完全瘫痪了.后端的服务可以

  • Kaleidoscope, Mac 下一个不错的比较工具,从 $69.99 降价到 $34.99 了

    https://itunes.apple.com/us/app/id587512244?mt=12 --cut-- windirt在2014-12-22 14:31:1回答到: 这个不是被评价为好看不中用么,只能对比不能修改,被beyondcompare吊打? luoweihua7sync在2014-12-22 14:42:1回答到: 准备入bc了.win下习惯了 victor在2014-12-22 15:09:3回答到: Kaleidoscope 的意义是一个 diff 或者 merge to

  • PS为美女照片调出亮红非主流色调 PS为美女照片调出亮红非主流色调

    教程教你如何把照片调出亮红的非主流色调,主要涉及了几个调整层的应用,和用笔刷做高光的简单应用. 原图 效果 详细教程 1.打开原图,添加一个可选颜色调整层,调整[黄色]部分,青色 +100%,洋红 +100%,黄色 -22%,黑色 -56% 2.添加一个色阶调整层,参数如图所示 本站推荐:photoshop7.0迷你版免费下载 | Photoshop CS5 中文免费下载 | photoshop免费下载 查看更多PS教程

  • [分享] 使用vim的snipMate插件实现代码片段的自动完成 [分享] 使用vim的snipMate插件实现代码片段的自动完成

    让vim自动完成代码片段 ================== 使用vim编写代码时, 经常会输入一定模式的代码片段, 比如在写html代码时常输入如下的代码: <div id="name" class="name" > </div> 使用vim的snipMate插件可以让你仅输入div+tab即可"自动完成"上面的代码片段, 更厉害的是, snipMate会自动定位到name单词所在位置, 我们只需要继续敲键盘就可以输入

  • PS初学者必看!PS动作详细使用图文教程 PS初学者必看!PS动作详细使用图文教程

    在做图象处理的时候,我们注重质量的同时也是需要注重时间的,不能花费大量的时间去处理一幅图象,当然更不能花费大量时间去做重复的劳动,因此,在使用PS的时候,我们应该注意方法,要充分利用PS给我们的资源与命令,而谈到效率,我们就不得不谈PS Action了,这也是很多人所忽略的地方. PS Action的重要性不亚于PS中的图层.滤镜,PS中Action方法的引入,不但可以使繁琐的操作得到简化,而且极大的方便了用户之间经验的交流.特别是当您需要对大批量的文件进行同一系列的操作时,灵活使用Action

  • 中国古代十大残忍“黑暗料理” 这些菜肴是怎么诞生的? 中国古代十大残忍“黑暗料理” 这些菜肴是怎么诞生的?

    都说中国饮食文化丰富,有人说凡是中国境内的东西就没有中国人不吃的.几千年的饮食文化传承下来,不但诞生了数不清的美食,也诞生了大量黑暗料理,下面看看中国的十大禁菜: 1.醉虾 顾名思义,是把活虾放入酒中,没一会儿虾就醉了. 具体的操作步骤是,把冰块放入玻璃器皿中,然后放入活虾,最后将黄酒倒入完全浸泡住虾并盖上盖子. 这样食用者在品尝虾的鲜香的同时,也尝到了酒的洌香. 醉虾属于成都菜. 2.风干鸡 做风干鸡,需要一定的手法,而且速度必须非常快. 这是道藏菜,大师以极快的速度拔毛.取脏.填调料入鸡腹.

  • 明哲美文:穷不是你的错,无耻才是你的错 明哲美文:穷不是你的错,无耻才是你的错

    我穷我有理,你富你活该. 昨天晚上一朋友甩给我一个链接,说刷新一下三观,已经上腾讯新闻了. 我打开一看,是一个奇葩帖子,由于回复的人太多,而且一面倒的全部在骂,于是火得成了新闻. 那个帖子的名字叫<我是小姑子,我讨厌我嫂子>,一个女的自诉道:我嫂子是浙江杭州人,独生女,父母在事业单位上班,母亲早年做生意挣下不少钱,嫂子和我哥哥都是文员,每月工资也就3000多元.而她家在郊区,没有什么钱,父母供她和哥哥上大学几乎花光了所有积蓄,所以哥哥和嫂子结婚,都是用女方的钱. 用到什么程度呢,当时他哥嫂结婚

  • 送别诺基亚背影:芬兰文化浴血求重生 送别诺基亚背影:芬兰文化浴血求重生

    腾讯科技 范晓东 11月23日报道 在首都赫尔辛基以西17公里的河谷地区,坐落着芬兰第二大城市埃斯波,地势宽阔平坦,经济发达.毗邻芬兰湾的地方,是著名的设计时,甚至把诺基亚前总裁约玛·奥利拉设计成一个催动法力蚕食苹果.类似吸血鬼的恐怖形象. 芬兰设计师马蒂·坎塔的海报设计(腾讯科技配图) "当我们的品牌,甚至国家领导人敢于被调侃,国家形象其实就树立起来了."<芬兰图片周刊>如此评论. 当然,完全把诺基亚的倒下完全归咎于人文因素和战略失策肯定是不准确的.从某种意义来说,诺基亚

  • 山东元宵节习俗 山东元宵节习俗

    习俗1: 在淄博一带,正月十六家家户户都去河里挑水做五色饭 用五种颜色的粮食煮成稀粥,据说吃了五色饭不患头痛病.临朐等地的小儿女,这天以五色米杂七孔针(一种植物)煮粥做巧饭,谓之"增智".临沂.淄博地区的一些少女,这一天也做"乞巧饭".她们先在村中挨家挨户地"讨米",凑足一两碗后,自带炊具到河边淘米野炊.巧饭做好后,先祭河神,再喂鱼虾,最后大家一起吃,吃前还唱一些歌谣,据说姑娘吃了乞巧饭就会心灵手巧.吃乞巧饭的风俗,更多见于七夕. 滕州一带,正月

  • 适合白领的减压养生运动 适合白领的减压养生运动

    白领一族平时工作压力大,想要减压,就需要通过有效的方法来缓解压力.有些人喜欢通过喝酒.K歌等方式进行,不过,这些都不是最正确的养生减压法.实际上最适合白领一族减压的方法就是中医养生减压法,诸如书法.太极.瑜伽等运动,尤其是瑜伽,最适合白领一族减压养生.下面就为各位白领人士详细解读一下以上三种中医养生减压法的妙处. 中医养生减压法:书法 既怡情又养生 <素问·阴阳应象大论>载:"怒伤肝"."喜伤心"."思伤脾"."忧伤肺&qu

热门推荐
  • 美图看看陪你回味北京车展 美图看看陪你回味北京车展 靓车!美腿!美图看看陪你回味北京车展 2014年4月20日,第十三届北京国际车展在中国国际展览中心拉开帷幕,这又是一场豪车与美女的盛宴.靓车.美腿美女车模-在你用单反把它们"带回家"后,记得用美图看看来陪你回味哦!超大看图界面浏览高清大图毫无压力,而且还可批量实施图片编辑操作. 一.各种单反格式读取无压力 相机.手机拍到的照片,终究要经过导出这一步,存放在更大屏幕的PC电脑上欣赏才够爽.那么,你是否在导出照片的过程中,遇到过因为格式的不兼容导致导出失败呢?以后记得用美图看看就对了.这款
  • 失眠心情短语 失眠心情短语 01.失了眠的夜,是最纯粹的安静. 02.水凉了还可以再喝 可是心凉了就连呼吸都痛 03.我们都是活着的木偶,偶尔,也有自己的思想. 04./zyz/ ? 回忆 是件很累的 事情.就像 失眠时 怎么躺 都不对的样子... 05.[ 你失眠一夜 我晚晚难安 ] 06.人生已经如此地艰难 有些事情就不要拆穿. 07.我想你不要忘记你一个人的时候我也是一个人. 08.人生如梦,我总失眠,人生如戏,我总笑场. 09.失眠的爱情最终会睡眠.? 10.胃疼就喝热水天冷就添衣感冒就吃药饿了就煮饭下雨就撑伞失眠
  • 香煎羊排配土豆泥的做法 香煎羊排配土豆泥的做法 原料:法式羊排.普罗旺斯口味腌肉料.土豆.盐.黑胡椒碎.沙拉酱.圣女果.薄荷. 香煎羊排配土豆泥的做法 1.准备好原材料: 2.取适量腌肉料: 3.用水调匀: 4.小羊排洗净控干水份: 5.将腌肉料浇在羊排上: 6.腌制2小时入味: 7.土豆洗净去皮,切厚片: 8.蒸熟或者煮熟后,用勺子压成泥: 9.调入盐和黑胡椒碎: 10.挤上沙拉酱拌匀即可: 11.平底锅加热.放入腌好的羊排,一并倒入腌料汁: 12.两面煎,按个人口感,来煎到想要的熟度.
  • 谷歌无聊创意科技 智能牙齿出现 谷歌无聊创意科技 智能牙齿出现 谷歌无聊创意科技 智能牙齿出现 [本站]发明创作是人类的美德,智能牙齿的出现给了很多的惊奇,但是,往往也令人失望的厉害! 世界上的科技巨头都以创新著称,它们所拥有的专利由内而外地遍布其产品.服务.其中,IBM以坐拥7534个专利位居第一,该公司的发明家平均每天发明20多项专利.不过,除了为人们熟知的科技产品,这些科技公司还发明了许多牛哄哄的奇葩专利. 这是谷歌的人体植入电子装置发明之一.智能牙齿装置被做成了牙齿的形状,像智能眼镜一样可识别特定的动作,比如眨眼.闭眼或点头,并在相连的设备上执行相对
  • 剑灵咆哮寺院怎么打 咆哮寺院打法攻略分享 剑灵咆哮寺院怎么打 咆哮寺院打法攻略分享 在剑灵的这一款游戏里面的咆哮寺院百次成就怎么快速达成?剑灵咆哮寺院怎么快速刷100次?在成就获得中刷图是最难得,因为往往需要大量的时间.那么今天小编在这里就来给各位玩家们详细的说说方法,想知道的玩家们就快来跟着小编一起看下吧. 给各位剑灵的玩家们来详细的解析分享一下咆哮寺院的打法攻略. 攻略分享: 看到这里是不是有的灵芝会想下100次副本这可需要多久才能够实现的啊,简直就是不可能的任务啊!莫慌,这次咱们可不需要这么麻烦,咱们需要做的就是眼疾手快就好! 首先咱们要了解到的是该咆哮寺院中,完成副本的
  • 怀孕3月营养需求 怀孕3月营养需求 怀孕3月营养需求 孕早期前三个月要求的营养成分和孕前相比,没有什么明显的增加.因为孕早期不是胎儿飞速生长的时期,要求的营养补给量只是稍微有所增加,但是增加得不是很明显.所以不用吃得太多.另外,孕早期还会有早孕反应的出现,所以饮食一般以清淡.容易消化的食物为主.可以少量多餐,每一顿稍微少吃点,多分成几顿吃,这样做一是促进吸收,二是能降低早孕反应的刺激. 蛋白质 怀孕第三个月要尽量保证准妈妈的蛋白摄入量,可以多方面摄入,植物蛋白和动物蛋白都可以. 本站阅读配图 食物来源:口蘑.松蘑.猴头菇等菌类,黄