js进阶实例，数字时钟

先看效果，动态数字时钟

用到了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;
}

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的注释我写的比较全，应该可以看懂

js进阶实例，数字时钟相关推荐

用js计时器实现数字时钟
代码如下 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
html数字时钟免费代码,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
HTML+CSS+JS实现 ❤️ 科技感的数字时钟特效❤️
代码目录: 主要代码实现: css样式 : @charset "utf-8"; @import url("https://fonts.googleapis.com/css ...
html显示时钟翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
JS电子表数字时钟js特效代码
下载地址 JS电子表数字时钟特效代码,仿LED效果动态时间特效. dd:
js数字时钟 js桌面时钟 js获得系统当前时间
<html> <head> <title>数字时钟</title> <meta http-equiv="content-Type&quo ...
用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...

js进阶实例，数字时钟

js进阶实例，数字时钟相关推荐

最新文章

热门文章