基于JavaScript实现数码时钟效果
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
使用JS显示倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!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"> &l
-
js实现一个简单的数字时钟效果
效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
-
JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&q
-
javascript实现滚动效果的数字时钟实例
网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set
-
javascript数字时钟示例分享
代码很简单,直接上代码了,大家可以复制下面的代码保存成HTML文件运行看效果 复制代码 代码如下: <!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">
-
JS 实现倒计时数字时钟效果【附实例代码】
这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
基于JavaScript实现数码时钟效果
本文实例为大家分享了js实现数码时钟效果展示的具体代码,供大家参考,具体内容如下 通过建立toDBl函数将小于10的时间前面补上"0"使得时钟正常运行. 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中. 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化. 通过getHours,getMinutes,getSeconds来获取当前时间的数值.并将其通过toDbl函数+' '(一个空的字
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
-
javascript实现数字时钟效果
本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.通过date获取时间 2.通过间隔定时器setInterval动态获取时间 3.间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间 4.为了样式好看,我们这是用数字图片来代替数字的 源代码 HTML部分 <div id="div"> <img src="img/0.png" /> <img src=
-
基于javascript实现窗口抖动效果
本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r
-
基于JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo
-
基于JavaScript实现游戏购物车效果详解
目录 项目展示 登陆界面 注册界面 主界面 项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
-
Javascript实现动态时钟效果
本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }
-
基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去. 在操作或者进行比较的时候,都要用offset取
-
基于JavaScript实现省市联动效果
本文实例为大家分享了JavaScript实现省市联动效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市级联动效果</title> </head> <body onload="initProvince()"> 省
-
基于JavaScript实现瀑布流效果
本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 前端内容: 使用JavaScript和四个div,将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container { width: 1000px
随机推荐
- PHP 图片水印类代码
- python 中的int()函数怎么用
- Windows7下安装Scala 2.9.2教程
- Jekyll静态网站后台引擎使用教程
- 浅谈jquery中的each方法$.each、this.each、$.fn.each
- 详细AngularJs4的图片剪裁组件的实例
- iOS 实现跑马灯效果的方法示例
- Asp.Net各种超时问题总结
- 详解PHP字符串替换str_replace()函数四种用法
- PHP中array_merge和array相加的区别分析
- django自定义Field实现一个字段存储以逗号分隔的字符串
- Python面向对象编程中关于类和方法的学习笔记
- ASP中FSO的神奇功能 - 写文件
- C# 判断字符为空的6种方法的效率实测对比
- mysql通过find_in_set()函数实现where in()顺序排序
- Java中JFrame实现无边框无标题方法
- jquery中的查找parents与closest方法之间的区别
- 深入c# GDI+简单绘图的具体操作步骤(一)
- Android轻松实现多语言的方法示例
- 解决Tomcat在修改代码后不会自动reload的问题