js动态数字时钟
js动态数字时钟
主要用到知识点:
- 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find()
- 时间的处理和渲染
- js用到面向对象的写法
实现的功能
- 炫酷的数字时间效果
- 直接看效果
html:
<div class="wraper">
<div class="column">
<div class="item">0</div>
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="column ten"></div>
<div class="colon">:</div>
<div class="column six"></div>
<div class="column ten"></div>
<div class="colon">:</div>
<div class="column six"></div>
<div class="column ten"></div>
</div>
css:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #0e141b;
}
.wraper {
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
.column,
.colon {
display: inline-block;
vertical-align: top;
color: #fff;
font-size: 86px;
line-height: 86px;
font-weight: 300;
transform: translateY(50vh);
margin-top: -43px;
transition: all 0.3s;
}
.visible {
opacity: 1;
box-shadow: 0px 0px 20px #fff;
border-radius: 5px;
}
.near1 {
opacity: 0.7;
}
.near2 {
opacity: 0.6;
}
.near3 {
opacity: 0.4;
}
.far1 {
opacity: 0.3;
}
.far2 {
opacity: 0.2;
}
.far3 {
opacity: 0.1;
}
.none {
opacity: 0.05;
}
js:
function Time(bom,use24){
this.Bom = Array.from(bom);
this.format = use24;
this.classList = ['visible', 'near1', 'near2','near3', 'far1', 'far2', 'far3'];
this.creatDom();
this.setTime();
}
//生成dom元素
Time.prototype.creatDom=function(){
for(let i=0;i<6;i++){
let odiv = "<div class='item'>"+i+"</div>";
$('.six').append(odiv);
}
for(let i=0;i<10;i++){
let idiv = "<div class='item'>" + i + "</div>";
$('.ten').append(idiv);
}
}
//设置当前时间到页面
Time.prototype.setTime = function(){
let self =this;
setInterval(function(){
let presentTime = self.getTime();
self.Bom.forEach((ele,index)=>{
var n = +presentTime[index];
var offset = n * 86;
$(ele).css({
marginTop:-43 - offset +'px'
})
Array.from(ele.children).forEach(function (ele1,index1){
$(ele1).attr('class', self.getClassName(n,index1));
})
})
},500)
}
Time.prototype.getClassName = function(n,i){
let className = this.classList.find(function(item,index){
return i - index === n || i + index === n;
})
// console.log(className)
return className || 'none';
}
//获取当前时间并处理
Time.prototype.getTime=function(){
let Data = new Date();
let timeArr =[];
let timeStr = '';
timeArr.push(this.format ? Data.getHours() : Data.getHours() % 12 || 12, Data.getMinutes(),Data.getSeconds());
timeStr = timeArr.reduce(function(p,n){
return p + ('0' + n).slice(-2);
},'');
return timeStr;
}
new Time($('.column'),true);
参考自:腾讯课堂渡一教育
js动态数字时钟的更多相关文章
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- js 动态时钟
js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- MUI 里js动态添加数字输入框后,增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
- html5 canvas js(数字时钟)
<!doctype html> <html> <head> <title>canvas dClock</title> </head ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- 基于Verilog HDL 的数字时钟设计
基于Verilog HDL的数字时钟设计 一.实验内容: 利用FPGA实现数字时钟设计,附带秒表功能及时间设置功能.时间设置由开关S1和S2控制,分别是增和减.开关S3是模式选择:0是正常时钟 ...
随机推荐
- 由ping所引发的思考~
今天看了掘金一片关于ping原理的文章,https://juejin.im/entry/5af8d5e651882565bd25581c?utm_source=gold_browser_extensi ...
- python_选择结构
>>> if 3>2:print('ok') ok>>> if True:print(3);print(5) >>> chTesst=['1 ...
- PAT1013: Battle Over Cities
1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...
- c语言之单链表的创建及排序
今天对之前学习过的链表知识进行简单的总结顺便写点代码:创建一个链表有头插法跟尾插法两种,在下面代码中我们为结点分配的内存实在堆上分配的,因此需要我们手动释放,释放用free()函数 下面代码贴出具体代 ...
- elasticsearch x-pack
elasticsearch-plugin.bat install x-pack D:\elasticsearch-5.5.3\bin>elasticsearch-plugin.bat insta ...
- LoadRunner常用方法
LR常用的函数 lr_start_transaction: 为性能分析标记事务的开始 lr_end_transaction: 为性能分析标记事务的结束 lr_rendezvous: 在 Vuser 脚 ...
- 剑指offer(javascript实现)
1.二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. funct ...
- spring的依赖注入是什么意思
最近学习spring框架,对依赖注入有些模糊,遂上网翻阅资料,做了下列总结,原博客为CSDN 南夏的 spring的依赖注入是什么意思,侵删! Spring 能有效地组织J2EE应用各层的对象.不管是 ...
- python:解析js中常见的 不带引号的key的 json
首先要明晰一点,json标准中,key是必须要带引号的,所以标准json模块解析不带引号的key的 json就会抛错 不过有一些lib可以帮我们解析 如:demjson(链接) >>> ...
- Python set() 函数
描述 set() 函数创建一个无序不重复元素集,可进行关系测试,删除重复数据,还可以计算交集.差集.并集等. 语法 set 语法: class set([iterable]) 参数说明: iterab ...