进度条
1 <style> 2 #progress{ 3 position: relative; 4 margin: auto; 5 top: 200px; 6 display: block; 7 width: 200px; 8 height: 20px; 9 border-style: dotted;10 border-width: thin;11 border-color: darkgreen;12 }13 #filldiv{14 position:absolute;15 top: 0px;16 left: 0px;17 width: 0px;18 height: 20px;19 background: blue;20 }21 #percent{22 position: absolute;23 top: 0px;24 left: 200px;25 }26 </style>27 <script>28 29 </script>30 <body>31 <div id="progress">32 <div id="filldiv"></div>33 <span id="percent">0</span>34 </div>35 </body>36 </html>37 <script src="public.js"></script>38 <script>39 var filldiv = document.getelementbyid("filldiv");40 var percent = document.getelementbyid("percent");41 var timer = 个人优秀事迹tinterval(function(){42 filldiv.style.width = filldiv.offtwidth + 2 + "px";43 filldiv.style.background = getcolor();44 var rate = 100 * filldiv.offtwidth / 200;45 percent.innerhtml = rate + "%";46 if(filldiv.offtwidth == 200){47 clearinterval(timer);48 }49 },60)50 </script>public.js
function $id(id){//给我一个id名，返回一个这个id的元素 四年级上册计算题return document.getelementbyid(id);}//求随机数function rand(min,max){ return ma学模特th.round(math.random()*(max - min) + min);}//随机的16进制颜色function getcolor(){ var str = "0123456789abcdef";//十六进制字符串 var color = "#"; for(var i三毛传 = 0; i <= 5; i++){//取6个数 color += str.charat(rand(0,15)); //rand(0,15)随机0-15之间的数，作为charat()的下标，取出下标对应的字符 } return color;}function zero(val){ return val < 10 ? "0" + val : val;}//时间差function diff(start,end){//2000-2018 2018 - 2000 //console.log(start.gettime()); return math.abs(star三八节t.gettime() - end.gettime())/1000;}
本文发布于:2023-04-03 09:26:08，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/eb8f28b3a6d705b9667dbca1dd27244c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：进度条效果.doc
本文 PDF 下载地址：进度条效果.pdf
| 留言与评论（共有 0 条评论） |
