javascript实现数字时钟特效
更新时间：2021年09月22日 08:36:10 作者：墨者羽晨
这篇文章主要为大家详细介绍了javascript实现数字时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现数字时钟特效的具体代码，供大家参考，具体内容如下
先看效果，动态数字时钟
用到了jQuery，但是只是用来获取元素，只有一点点
面向对象开发
看代码
HTML，自己引入jQuery和js，jQuery在前
<body>
<div class="wrapper">
<div class="column">
<!-- 此div表示时的十位，只有0,1,2三个 -->
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<!-- 以下的内容写到HTML内代码太过冗余，使用js写入 -->
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
background-color: #0e141b;
overflow: hidden;
/* 设置溢出隐藏 */
}
.wrapper{
text-align: center;
width: 100%;
}
.wrapper .column,
.wrapper .coln{
display: inline-block;
vertical-align: top;
color: rgba(224,230,235,0.89);
font-size: 86px;
line-height: 86px;
font-weight: 300;
}
.column{
transition: all 300ms ease-in;
}
.coln{
/* 冒号的位置 */
transform: translateY(calc(50vh - 83px));
}
/* 以下都是不同类名对应的透明度 */
.visible{
opacity: 1;
}
.close{
opacity: 0.25;
}
.far{
opacity: 0.15;
}
.distance{
opacity: 0.05;
}
JS
function Index(dom, use) {
// 把传进来的DOM元素转数组
this.column = Array.from(dom);
// 把use转到全局，这个是判断要显示的时制是112小时还是24小时
this.use = use;
// 这个数组是后面要设置的类名
this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
this.creatDom();
this.start();//开始
}
// 开始函数
Index.prototype.start = function () {
var self = this;
setInterval(function () {
var c = self.getClock();
// console.log(c);
self.column.forEach(function (ele, index) {
var n = + c[index];
var offset = n * 86;//移动距离
console.log(offset);
$(ele).css({
'transform': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
// 设置移动
});
Array.from(ele.children).forEach(function (ele2, index2) {
var className = self.getClass(n, index2);
// 调用函数设置类名
$(ele2).attr('class', className);
})
})
}, 500);
};
// 为距离时间不一样的元素设置不一样的class名
Index.prototype.getClass = function (n, i) {
var className = this.classList.find(function (ele, index) {
return i - index === n || i + index === n;
})
return className || "";
}
// 获得时间并且格式化时间,字符串 21:06:09 ==> 210609
Index.prototype.getClock = function () {
var d = new Date();
// 这里走一个三目运算符，如果use是真（true）则取值，如果为假则12取余转为12小时制
return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
return p + ('0' + n).slice(-2);
// 这里是吧个位数加0，比如1添加一个0后得到01，如果是12加0后事012，但是取数值后两位，得到12
}, '')
};
// 由于把HTML元素都写到HTML文件里，太过冗余，所以使用for循环添加进去
Index.prototype.creatDom = function () {
for (var i = 0; i < 6; i++) {
var oDiv = '<div>' + i + '</div>';
$(".six").append(oDiv);
}
for (var i = 0; i < 10; i++) {
var iDiv = '<div>' + i + '</div>';
$(".ten").append(iDiv);
}
};
// 第二个参数，true为24小时制，false为12小时制
new Index($('.column'), true);
js的注释我写的比较全，应该可以看懂
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
range 是用户选择区域的唯一表示方法，存在 w3c 的标准化 range ，以及 ie 特有的 textrange 与 controlrange ，相对于 ie ，w3c 的概念更易于理解，首先简要介绍一下 w3c range.2011-08-08
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文主要介绍了typescript 类型any不能分配给类型never，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
jq-signature.js是一个帮助你创建签名的jQuery插件，允许你的用户使用鼠标，手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料，需要的朋友可以参考下。2017-05-05
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript设计模式之适配器模式介绍,适配器模式,一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况,需要的朋友可以参考下2014-12-12
在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧2024-11-11
这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要为大家详细介绍了js实现网页定位导航功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
整理的比较全的event对像在ie与firefox浏览器中的区别
event对像在IE与FF中的区别，本文整理了很多，个人感觉还是比较全面的，需要的朋友可以收藏下2013-11-11
最新评论