脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js动态网页时钟

JavaScript实现动态网页时钟

 更新时间：2022年06月21日 12:19:03   作者：Cairo960918  
这篇文章主要介绍了JavaScript实现动态网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现动态网页时钟的具体代码，供大家参考，具体内容如下

设计思路：

1先建立一个数组保存带有0〜9数字的10张图片;

2.通过GETDATE（）获得本地时间保存在变量数值指明MyTime中;

3. getHours（）返回的是24进制即0~23的整数，getMinutes（）方法返回一个处于0到59之间的整数，getSeconds（）方法返回一个处于0到59之间的整数;

4.通过的setTimeout（）每隔1秒调用一次显示（）函数改变图像对象的SRC属性。

串对象的的charAt（ID）方法：返回指定位置处的字符，标识为要寻找的字符的位置的索引整数，0对应左边第1个字符，1对应左边第2个字符，如喂的的charAt（1 ）则是è;

代码如下： 

<html>
<head>
<title>时钟</title>
<meta charset="utf-8">
<style>
*{
    padding:0;
    margin:0;
    }
</style>
<script>
function show(){
    var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");
    var myTime=new Date();
    var hours=myTime.getHours();
    var minutes=myTime.getMinutes();
    var seconds=myTime.getSeconds();
    if(hours<=9){hours="0"+hours;}//补足两位
    if(minutes<=9){minutes="0"+minutes;}
    if(seconds<=9){seconds="0"+seconds}
    var theString=""+hours+minutes+seconds;//转换为字符串
    document.getElementById("img0").src=images[theString.charAt(0)];
    document.getElementById("img1").src=images[theString.charAt(1)];
    document.getElementById("img2").src=images[theString.charAt(2)];
    document.getElementById("img3").src=images[theString.charAt(3)];
    document.getElementById("img4").src=images[theString.charAt(4)];
    document.getElementById("img5").src=images[theString.charAt(5)];
    setTimeout("show()",1000);
    }
</script>
</head>
<body onLoad="show()">
<img id="img0" /><img id="img1" />时<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" />
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • javascript 原型与原型链的理解及实例分析

    javascript 原型与原型链的理解及实例分析

    这篇文章主要介绍了javascript 原型与原型链的理解,结合实例形式分析了javascript 原型与原型链的原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-11-11
  • JS的千分位算法实现思路

    JS的千分位算法实现思路

    本文为大家讲解下JS的千分位算法的具体实现，先去除空格,判断是否空值和非数；针对是否有小数点，分情况处理；感兴趣的朋友可以参考下
    2013-07-07
  • 在服务端(Page.Write)调用自定义的JS方法详解

    在服务端(Page.Write)调用自定义的JS方法详解

    自从[javascript]自定义MessageBox一文发布以后，很多网友都来信询问，如何在服务端调用ShowInfo方法，周末休息想了个折中的办法来实现
    2013-08-08
  • Javascript实现div的toggle效果实例分析

    Javascript实现div的toggle效果实例分析

    这篇文章主要介绍了Javascript实现div的toggle效果的方法,实例分析了采用纯javascript实现toggle效果的相关技巧,需要的朋友可以参考下
    2015-06-06
  • js判断PC端与移动端跳转

    js判断PC端与移动端跳转

    本文主要介绍了js判断PC端与移动端跳转的方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript实现简单的隐藏式侧边栏功能示例

    JavaScript实现简单的隐藏式侧边栏功能示例

    这篇文章主要介绍了JavaScript实现简单的隐藏式侧边栏功能,涉及javascript结合定时器针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • 轻松掌握JavaScript装饰者模式

    轻松掌握JavaScript装饰者模式

    这篇文章主要帮助大家轻松掌握JavaScript装饰者模式，告诉大家什么是js装饰者模式，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS实现拖拽的方法分析

    JS实现拖拽的方法分析

    这篇文章主要介绍了JS实现拖拽的方法,结合实例形式分析了JS拖拽的实现原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 前端js中的事件循环eventloop机制详解

    前端js中的事件循环eventloop机制详解

    这篇文章主要给大家介绍了关于前端js中事件循环eventloop机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js 处理URL实用技巧

    js 处理URL实用技巧

    escape()、encodeURI()、encodeURIComponent()三种方法都能对一些影响URL完整性的特殊字符进行过滤。
    2010-11-11

最新评论