原生JS实现数码表特效
本文分享一个用原生JS实现的数码时钟特效，效果如下：
上面的数字是用的图片生成的，共10张图片如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现数码表特效</title>
<style>
body {
background: blue;
color: white;
font-size: 30px;
}
#div1 {
width: 220px;
height: 36px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px #FFF solid;
}
#div1 img {
width: 25px;
height: 36px;
position: relative;
}
</style>
<script>
window.onload = function () {
//获取所有的图片
var aImg = document.getElementsByTagName('img');
//获取本地进间对象
var oDate = new Date();
//小时+分钟+秒
var prevStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//声明下一次时间的字符串变量
var nextStr = '';
//同一时间变化的不仅仅秒数,有可能是多位数，建数组存储
var arr = [];
var timer = null;
//第i个img图片的src地址为img下当前时间第i位数所对应的图片名称
//104604=>通过charAt(i)分别获得1到6位的字符,即1,0,4,6,0,4
for (var i = 0; i < aImg.length; i++) {
aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
};
//设置定时器，1秒钟执行1次toChange方法
setInterval(toChange, 1000);
//获取下一次的时间
function toChange() {
//获取本地进间对象
var oDate = new Date();
//小时+分钟+秒
nextStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//将上一次的时间和下一次的时间做对比
toCom(prevStr, nextStr);
//把下1秒的时间赋给当前，不断变化
prevStr = nextStr;
};
//上一次的时间和下一次的时间对比函数
function toCom(str1, str2) {
//比较之前，将之前的清空，重新赋值
arr = [];
//遍历第1次时间的每1位数字
for (var i = 0; i < str1.length; i++) {
//如果有1位字符与下一次时间对应的字符不同
if (str1.charAt(i) != str2.charAt(i)) {
//将它压入数组中
arr.push(i);
}
}
//执行图片翻转
startMove();
};
//图片翻转函数
function startMove() {
//图片高度36px,设定第次减少-4px
var iSpeed = -4;
//设定定时器
timer = setInterval(function () {
//循环遍历数组中上一次时间和下一次时间发生变化的字符串
for (var i = 0; i < arr.length; i++) {
//如果数组中不同的字符所对应名称的图片高度等于0
if (aImg[arr[i]].offsetHeight == 0) {
//将变化速度设为增加4px
iSpeed = 4;
//不同的字符所对应名称的图片位置等于img里下一次时间第i位数所对应的图片名称
//i代表两次时间变化所在的数字位数,arr[i]得出具体数字
aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
}
//数组中不同的字符所对应名称的图片的高度等于它内容高度每次减4px
//注意style.height和offsetHeight的高度
aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//数组中不同的字符所对应名称的图片的top值等于它内容高度1半减18px
//以保证每次变化图片都可以居中显示
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
//当图片的高度达到最大高度36px时
if (aImg[arr[i]].offsetHeight == 36) {
//清除定时器
clearInterval(timer);
}
}
}, 10);
};
//获取本地时间个位数不满10，而十位数为0是没有的，此处封装函数补全
function toZero(num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
};
</script>
</head>
<body>
<div id="div1">
<img src="images/0.png" />
<img src="images/0.png" />:
<img src="images/0.png" />
<img src="images/0.png" />:
<img src="images/0.png" />
<img src="images/0.png" />
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于JavaScript实现数码时钟效果
本文实例为大家分享了js实现数码时钟效果展示的具体代码,供大家参考,具体内容如下 通过建立toDBl函数将小于10的时间前面补上"0"使得时钟正常运行. 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中. 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化. 通过getHours,getMinutes,getSeconds来获取当前时间的数值.并将其通过toDbl函数+' '(一个空的字
-
javascript实现简易数码时钟
本文实例为大家分享了javascript实现简易数码时钟的具体代码,供大家参考,具体内容如下 通过这个小例子复习一下Date对象的基本使用. 还可以用Date对象做定时器,计时器等等. 效果如图: 可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字,则定时切换图片即可. HTML代码: <div id="clock"> <p></p> <p></p> <p></p> </di
-
原生JS实现数码表特效
本文分享一个用原生JS实现的数码时钟特效,效果如下: 上面的数字是用的图片生成的,共10张图片如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现数码表特效</title> <
-
原生JS实现的放大镜特效示例【测试可用】
本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">
-
原生JS实现翻书特效
本文给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS实现翻书特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none;
-
原生JS实现目录滚动特效
分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻.动态.充值记录等,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <s
-
原生js简单实现放大镜特效
本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLeft 内容滚动的左边距
-
原生JS实现百叶窗特效
本文分享一个用原生JS实现的百叶窗特效,效果如下: 代码实现如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现百叶窗特效</title> <style> * { margin: 0;
-
限制字符输入数功能(jquery版和原生JS版)
已知BUG: Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug. 查看演示: 点此查看DEMO 核心代码: 复制代码 代码如下: //原生JavaScript版本 window.onload=function(){ var js=document.getElementById('js');//获取文本域 var info=document.getElementsByTagName('p')[0];//获取要插入提示信息
-
原生JS实现在线问卷调查投票特效
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS实现投票效果</title> <link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css"
-
原生js实现图片轮播特效
本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
-
原生JS实现特效留言框
本文给大家分享一个用原生JS实现的特效留言框,效果如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现特效留言框</title> <style> * { margin: