zoukankan
html css js c++ java
数字倒数效果
当页面初步加载时,显示数字滚动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1 arial; background:#3f3f3f;} .num{ 500px; padding:10px 0;border-radius:15px;text-shadow:1px 1px 1px #999; color:#fff;text-align:center; margin:120px auto; font-size:62px; font-weight:bold; border:5px solid #ccc; background:#fff;} .num strong{ font-weight:normal; border:1px solid #ccc; background:#333; padding:0 10px; text-align:center;} </style> </head> <body> <div id="num" class="num" style="display:none;">1000000</div> <script type="text/javascript"> String.prototype.repeat = function(n){ return Array(n + 1).join(this); }; var addFixed = 5, // 单次增加值 node = document.getElementById('num'), emTotal = node && node.innerHTML; function numAnim(){ var len = 1, last = 0, // 最终值 n = 0; // 需要填充的空白0 if(addFixed < emTotal){ // 跳出setTimeout条件 addFixed += Math.ceil((emTotal - addFixed) / 3); len = emTotal.length - (addFixed + '').length; last = n + '' + addFixed; n = '0'.repeat(10).slice(len); if(len == 0){ // 如果等于0后删除首位 last = last.slice(1); } last = last.split(''); last = '<strong>' + last.join('</strong><strong>') + '</strong>'; node.innerHTML = last; } setTimeout(numAnim, 100); } node.style.display = 'block'; numAnim(); </script> </body> </html>
运行代码
查看全文
相关阅读:
[CF786B] Legacy
[CF833B] The Bakery
[JSOI2008] 最小生成树计数
[SDOI2010] 外星千足虫
[POJ1830] 开关问题
[Luogu1365] WJMZBMR打osu! / Easy
[Noip2016] 换教室
[NOI2002] 荒岛野人
[计蒜之道复赛 2018] 贝壳找房计数比赛
[SDOI2014] 旅行
原文地址:https://www.cnblogs.com/jikey/p/2736599.html
最新文章
●POJ 2828 Buy Tickets
●POJ 1990 MooFest
●POJ 1195 Mobile phones
●codeforces 553E Kyoya and Train
●Codevs 4158 残缺的字符串
【LG3721】[HNOI2017]单旋
【LG3247】[HNOI2016]最小公倍数
【LG3250】[HNOI2016]网络
【LG3245】[HNOI2016]大数
【LG3248】[HNOI2016]树
热门文章
【LG3249】[HNOI2016]矿区
【LG3246】[HNOI2016]序列
【LG3240】[HNOI2015]实验比较
【LG3241】[HNOI2015]开店
【LG3244】[HNOI2015]落忆枫音
【LG3243】[HNOI2015]菜肴制作
【LG3242】 [HNOI2015]接水果
【LG3235】 [HNOI2014]江南乐
【LG3238】 [HNOI2014]道路堵塞
【LG3234】[HNOI2014]抄卡组
Copyright © 2011-2022 走看看