- 网站精华
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
收藏
暂无评论信息