javascript 时钟翻牌效果
分类专栏: Javascript&
简介 开发大屏平台的时候需要数字翻牌特效&
<pre class="ql-syntax" spellcheck="false"><!DOCTYPE html>
<html lang=<span class="hljs-string">"en"</span>>
<head>
<meta charset=<span class="hljs-string">"UTF-8"</span>>
<meta http-equiv=<span class="hljs-string">"X-UA-Compatible"</span> content=<span class="hljs-string">"IE=edge"</span>>
<meta name=<span class="hljs-string">"viewport"</span> content=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>>
<title>Document</title>
</head>
<body>
<style>
.clock {
overflow: hidden;
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-<span class="hljs-number">3d</span>;
-moz-transform-style: preserve-<span class="hljs-number">3d</span>;
-ms-transform-style: preserve-<span class="hljs-number">3d</span>;
-o-transform-style: preserve-<span class="hljs-number">3d</span>;
transform-style: preserve-<span class="hljs-number">3d</span>;
}
.unit {
float: left;
margin: 16px;
position: relative;
height: 129px;
width: 128px;
overflow: visible;
}
.top,
.btm {
height: 64px;
width: 128px;
overflow: hidden;
position: absolute;
}
.unit span {
font: 96px/128px Tahoma, Geneva, sans-serif;
width: 128px;
text-align: center;
position: absolute;
}
.btm span {
top: -64px;
}
.top {
background: #ddd;
border-bottom: 1px solid #<span class="hljs-number">999</span>;
border-radius: 10px 10px <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
top: <span class="hljs-number">0</span>;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
-moz-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
}
.btm {
background: #eee;
border-radius: <span class="hljs-number">0</span> <span class="hljs-number">0</span> 10px 10px;
top: 65px;
-webkit-transform-origin: top;
-ms-transform-origin: top;
-moz-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
</style>
<script>
<span class="hljs-keyword">var</span> clkCls = <span class="hljs-string">"clock"</span>;
<span class="hljs-keyword">var</span> clkUnitCls = <span class="hljs-string">"unit"</span>;
<span class="hljs-keyword">var</span> clkTopCls = <span class="hljs-string">"top"</span>;
<span class="hljs-keyword">var</span> clkBtmCls = <span class="hljs-string">"btm"</span>;
function transform(obj, tran) {
<span class="hljs-keyword">try</span> {
obj.style.WebkitTransform = tran;
obj.style.MozTransform = tran;
obj.style.msTransform = tran;
obj.style.OTransform = tran;
obj.style.transform = tran;
} <span class="hljs-keyword">catch</span> (e) {}
}
<span class="hljs-keyword">var</span> ClkUnit = function (<span class="hljs-keyword">val</span>, minVal, maxVal) {
<span class="hljs-keyword">this</span>.update = function () {
<span class="hljs-keyword">this</span>.updateTxt();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span> > <span class="hljs-keyword">this</span>.maxVal) { <span class="hljs-keyword">this</span>.setVal(<span class="hljs-keyword">this</span>.minVal); <span class="hljs-keyword">this</span>.period(); }
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span> < <span class="hljs-keyword">this</span>.minVal) { <span class="hljs-keyword">this</span>.setVal(<span class="hljs-keyword">this</span>.maxVal); <span class="hljs-keyword">this</span>.period(); }
}
<span class="hljs-keyword">this</span>.incVal = function () { <span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span>++; <span class="hljs-keyword">this</span>.update(); }
<span class="hljs-keyword">this</span>.decVal = function () { <span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span>--; <span class="hljs-keyword">this</span>.update(); }
<span class="hljs-keyword">this</span>.updateTxt = function () { <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span> > <span class="hljs-number">9</span>) <span class="hljs-keyword">this</span>.text = <span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">this</span>.text = <span class="hljs-string">"0"</span> + <span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span>; }
<span class="hljs-keyword">this</span>.setVal = function (v) { <span class="hljs-keyword">this</span>.<span class="hljs-keyword">val</span> = v; <span class="hljs-keyword">this</span>.updateTxt(); }
<span class="hljs-keyword">this</span>.pane = document.createElement(<span class="hljs-string">"div"</span>);
<span class="hljs-keyword">this</span>.pane.className = clkUnitCls;
<span class="hljs-keyword">this</span>.setVal(<span class="hljs-keyword">val</span>);
<span class="hljs-keyword">this</span>.minVal = minVal;
<span class="hljs-keyword">this</span>.maxVal = maxVal;
<span class="hljs-keyword">this</span>.topbak = document.createElement(<span class="hljs-string">"div"</span>); <span class="hljs-keyword">this</span>.topbak.txt = document.createElement(<span class="hljs-string">"span"</span>); <span class="hljs-keyword">this</span>.topbak.className = clkTopCls;
<span class="hljs-keyword">this</span>.topfnt = document.createElement(<span class="hljs-string">"div"</span>); <span class="hljs-keyword">this</span>.topfnt.txt = document.createElement(<span class="hljs-string">"span"</span>); <span class="hljs-keyword">this</span>.topfnt.className = clkTopCls;
<span class="hljs-keyword">this</span>.btmbak = document.createElement(<span class="hljs-string">"div"</span>); <span class="hljs-keyword">this</span>.btmbak.txt = document.createElement(<span class="hljs-string">"span"</span>); <span class="hljs-keyword">this</span>.btmbak.className = clkBtmCls;
<span class="hljs-keyword">this</span>.btmfnt = document.createElement(<span class="hljs-string">"div"</span>); <span class="hljs-keyword">this</span>.btmfnt.txt = document.createElement(<span class="hljs-string">"span"</span>); <span class="hljs-keyword">this</span>.btmfnt.className = clkBtmCls;
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.topbak); <span class="hljs-keyword">this</span>.topbak.appendChild(<span class="hljs-keyword">this</span>.topbak.txt);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.topfnt); <span class="hljs-keyword">this</span>.topfnt.appendChild(<span class="hljs-keyword">this</span>.topfnt.txt);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.btmbak); <span class="hljs-keyword">this</span>.btmbak.appendChild(<span class="hljs-keyword">this</span>.btmbak.txt);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.btmfnt); <span class="hljs-keyword">this</span>.btmfnt.appendChild(<span class="hljs-keyword">this</span>.btmfnt.txt);
<span class="hljs-keyword">this</span>.mtx = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.animateReset = function () {
transform(<span class="hljs-keyword">this</span>.btmfnt, <span class="hljs-string">""</span>);
transform(<span class="hljs-keyword">this</span>.btmbak, <span class="hljs-string">""</span>);
<span class="hljs-keyword">this</span>.btmfnt.txt.innerHTML = <span class="hljs-keyword">this</span>.text;
<span class="hljs-keyword">this</span>.topbak.txt.innerHTML = <span class="hljs-keyword">this</span>.text;
<span class="hljs-keyword">this</span>.topfnt.txt.innerHTML = <span class="hljs-keyword">this</span>.text;
<span class="hljs-keyword">this</span>.btmbak.txt.innerHTML = <span class="hljs-keyword">this</span>.text;
transform(<span class="hljs-keyword">this</span>.topfnt, <span class="hljs-string">""</span>);
transform(<span class="hljs-keyword">this</span>.topbak, <span class="hljs-string">""</span>);
}
<span class="hljs-keyword">this</span>.period = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.turnDown = function () {
<span class="hljs-keyword">var</span> u = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.mtx) <span class="hljs-keyword">return</span>; <span class="hljs-comment">//this.mtx = true;</span>
<span class="hljs-keyword">this</span>.incVal();
<span class="hljs-keyword">var</span> topDeg = <span class="hljs-number">0</span>; <span class="hljs-keyword">var</span> btmDeg = <span class="hljs-number">90</span>;
<span class="hljs-keyword">this</span>.topbak.txt.innerHTML = <span class="hljs-keyword">this</span>.text;
transform(u.topfnt, <span class="hljs-string">"rotateX(0deg)"</span>);
<span class="hljs-keyword">var</span> timer1 = setInterval(function () {
transform(u.topfnt, <span class="hljs-string">"rotateX("</span> + topDeg + <span class="hljs-string">"deg)"</span>); topDeg -= <span class="hljs-number">10</span>;
<span class="hljs-keyword">if</span> (topDeg <= -<span class="hljs-number">90</span>) {
transform(u.topfnt, <span class="hljs-string">"rotateX(0deg)"</span>);
u.topfnt.txt.innerHTML = u.text;
transform(u.btmfnt, <span class="hljs-string">"rotateX(90deg)"</span>);
u.btmfnt.txt.innerHTML = u.text;
<span class="hljs-keyword">var</span> timer2 = setInterval(function () {
<span class="hljs-keyword">if</span> (btmDeg <= <span class="hljs-number">0</span>) { clearInterval(timer2); u.animateReset(); u.mtx = <span class="hljs-literal">false</span>; }
transform(u.btmfnt, <span class="hljs-string">"rotateX("</span> + btmDeg + <span class="hljs-string">"deg)"</span>); btmDeg -= <span class="hljs-number">10</span>;
}, <span class="hljs-number">30</span>);
clearInterval(timer1);
}
}, <span class="hljs-number">30</span>);
}
<span class="hljs-keyword">this</span>.animateReset();
}
<span class="hljs-keyword">var</span> Clock = function (prt) {
<span class="hljs-keyword">this</span>.pane = document.createElement(<span class="hljs-string">"div"</span>);
<span class="hljs-keyword">this</span>.pane.className = clkCls;
<span class="hljs-keyword">var</span> d = new Date();
<span class="hljs-keyword">this</span>.hour = new ClkUnit(d.getHours(), <span class="hljs-number">0</span>, <span class="hljs-number">23</span>);
<span class="hljs-keyword">this</span>.munite = new ClkUnit(d.getMinutes(), <span class="hljs-number">0</span>, <span class="hljs-number">59</span>);
<span class="hljs-keyword">this</span>.second = new ClkUnit(d.getSeconds(), <span class="hljs-number">0</span>, <span class="hljs-number">59</span>);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.hour.pane);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.munite.pane);
<span class="hljs-keyword">this</span>.pane.appendChild(<span class="hljs-keyword">this</span>.second.pane);
prt.appendChild(<span class="hljs-keyword">this</span>.pane);
<span class="hljs-keyword">var</span> clock = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">this</span>.second.period = function () { clock.munite.turnDown(); }
<span class="hljs-keyword">this</span>.munite.period = function () { clock.hour.turnDown(); }
<span class="hljs-keyword">this</span>.timer = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.start = function () { <span class="hljs-keyword">this</span>.timer = setInterval(function () { clock.second.turnDown(); }, <span class="hljs-number">1000</span>); }
<span class="hljs-keyword">this</span>.pause = function () { clearInterval(<span class="hljs-keyword">this</span>.timer); }
<span class="hljs-keyword">this</span>.start();
}
<span class="hljs-keyword">var</span> c = new Clock(document.body);
</script>
</body>
</html>
</pre>&
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据