基于JavaScript实现数码时钟效果


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了js实现数码时钟效果展示的具体代码,供大家参考,具体内容如下

  • 通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。
  • 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中。
  • 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化。
  • 通过getHours,getMinutes,getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ '(一个空的字符串),将数字转化为字符串,并将这些字符串添加到str中。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>数码时钟2</title>
 <style type="text/css"> 
 *{
 background-color: rgb(7,110,177);
 vertical-align: middle;
 }
 #div1{
 text-align: center;
 width: 1300px;
 height: 220px;
 margin:0 auto;
 }
 span{
 font-size: 50px;
 color: white;
 }
 </style>
 <script type="text/javascript">
 window.onload=function()
 {
 var aImg = document.getElementsByTagName('img');
 function tick()
 {
  var oDate = new Date();
  var str = toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());
  for (var i = 0; i < aImg.length; i++) {
  aImg[i].src='images/'+str.charAt(i)+'.jpg';
  };
 };
 setInterval(tick,500);
 tick();

 };
 function toDbl(n)
 {
 if (n<10) {
  return '0'+n;
 } else {
  return ''+n;
 }
 };
 </script>
</head>
<body>
 <div id="div1">
 <img src="images/1.jpg">
 <img src="images/2.jpg">
 <span>:</span>
 <img src="images/3.jpg">
 <img src="images/4.jpg">
 <span>:</span>
 <img src="images/5.jpg">
 <img src="images/6.jpg">
 </div>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
bootstrap多层模态框滚动条消失的问题
Jul 21 #Javascript
基于JavaScript实现无缝滚动效果
Jul 21 #Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
You might like
php str_replace的替换漏洞
2008/03/15 PHP
PHP伪静态写法附代码
2008/06/20 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
详解Python中的测试工具
2019/06/09 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
什么是Rollback Segment
2013/04/22 面试题
几个Shell Script面试题
2012/08/31 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
先进班组材料范文
2014/12/25 职场文书
公司员工体检通知
2015/04/21 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript