您的位置：首页 > Web前端 > JavaScript

原生JS实现页面数字在一个随机数区域内跳动 -- 简书

2018-08-31 18:55 357 查看 
简单记录一下在工作中用到的随机数操作，今天leader说话了，“在网页上加个虚拟数字，加载时跳动，然后停在某一个随机数区间”。
这不是很简单吗，本来一个插件就完事。但是闲来无事不如自己写一个。
话不多说，简单的记录一下自己的代码。
1.首先给一个id用来控制数据变化
<p id="num">100</p>

2.在js中拿到你的id节点
let num=document.getElementById("num")

3.采用setInterval定时器，这里需要注意一个细节
a，在第一次做定时器的时候，我直接这样写了
setInterval(function(){
‘内容’
},1000)
b，后来发现，在我中止定时器的时候，不方便操作。所有又let个变量来存储我们的定时器：
let myTime = setInterval(function(){
‘内容’
},1000)
c，这里就要想办法怎么停止定时器了,我的做法是在外面var个变量，setInterval执行一次变量+1，知道满足某个次数的时候，clearInterval停止定时器，代码如下：
var timeRun=0;
let myTime=setInterval(function(){
‘内容’
timeRun+=1;
if(timeRun===5){
clearInterval(myTime)
}
},100)

这样就把我们的定时器设置好了，并且能让他在执行了n次过后自动停止。

4.现在就来考虑怎样去改变数字跳动，这里要用到随机数。
a.首先要考虑的是怎样去控制随机数的区域，在网上有很多function(min,max)传参进去控制随机数区域的函数，有时间的话可以去看看。在这里由于数据不多，我就直接min，max写了出来。
“改变的数字”=min+Math.round(Math.random*(max-min));
b.怎样去改变p标签里面的数字呢，很简单innerText
num.innerText=min+Math.round(Math.random() * (max-min));
这里面max是最大随机数，min是最小随机数。

整理一下代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面数字在一个随机数区域内跳动</title>
</head>
<body>
<p id="num">100</p>
<script>
let num=document.getElementById("num")
var timeRun=0;
let myTime=setInterval(function(){
num.innerText=100 + Math.round(Math.random() * 50);
timeRun+=1;
if(timeRun===5){
clearInterval(myTime)
}
},100)
</script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航