js实现动态时钟
更新时间：2020年03月12日 07:46:00 作者：林西相心
这篇文章主要为大家详细介绍了js实现动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现动态时钟的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
</head>
<script type="text/javascript">
function todou(n){
if(n<10){
return '0'+n;
}
else {
return ''+n;
}
}
window.onload=function(){
setInterval(function(){
var date = new Date();
var ma = document.getElementsByTagName('img');
var str =todou(date.getHours())+todou(date.getMinutes())+todou(date.getSeconds());
for(var i=0;i<ma.length;i++){
ma[i].src='images/'+str[i]+'.png';
}
// alert(todou(date.getSeconds()));
// var date = new Date();
//alert(todou(date.getSeconds()));
} ,1000)
}
</script>
<body>
<div style="background: grey;color: red; text-align: center;font-size: 100px;" >
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
时
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
分
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
秒
</div>
</body>
</html>
示例展示：
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
通过seajs实现JavaScript的模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。下面我们来一起深入学习下吧2019-06-06
这篇文章主要介绍了JavaScript截取字符串的2个函数介绍,它们分别是substring和substr函数,本文用实例讲解了它们的用法,需要的朋友可以参考下2014-08-08
本文主要介绍了js处理层级数据结构的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
本例是应用别人的例子，原来那位老兄是用一般方法写成的无限级折叠菜单，通过了一些简化修改，将原来的例子改成了面向对象的方式2013-07-07
今天小编就为大家分享一篇SSM+layUI 根据登录信息显示不同的页面方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS 实现获取验证码 倒计时功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
使用JSX 建立 Markup 组件风格开发的示例（前端组件化）
这篇文章主要介绍了使用JSX 建立 Markup 组件风格开发的示例（前端组件化）本文重点讲解如何从0搭建一个组件系统，在这里我们会学习使用JSX来建立markup 的风格，我们基于与React 一样的 JSX 去建立我们组件的风格2021-04-04
这篇文章主要为大家详细介绍了原生js实现自定义滚动条组件的开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
将数据导入Excel的方法有很多，本例介绍的这个是使用js来实现数据的导入，感兴趣的朋友可以了解下2014-09-09
JavaScript Promise多并发问题的解决方法详解
提起控制并发,大家应该不陌生,这篇文章主要来和大家介绍一下JavaScript如何解决Promise多并发问题,感兴趣的小伙伴可以跟随小编一起学习一下2023-09-09
最新评论