Javascript SetInterval並獲取值Math.random
[英]Javascript SetInterval and get value Math.random
問題描述
我剛剛創建了隨機數。 我的問題是如何在id中隨機獲取值以及如何每5秒自動設置價格變化且波動幅度小於當前的+/- 5％，我不知道使用setinterval函數每個人都幫我
我的代碼隨機價格：
function generateRandomNumber(min,max) {
return (Math.random() * (max - min) + min).toFixed(2);
};
document.getElementById('price1').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price2').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price3').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price4').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price5').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price6').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price7').innerHTML = generateRandomNumber(0,99.99);
4 個解決方案
解決方案1
1 2017-10-25 02:36:01
我想你可以理解這段代碼。 我試圖保留你的代碼。 關鍵是使用setInterval函數。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script> function generateRandomNumber(min,max) { return (Math.random() * (max - min) + min).toFixed(2); }; function assignData(){ document.getElementById('price1').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price2').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price3').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price4').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price5').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price6').innerHTML = generateRandomNumber(0,99.99); document.getElementById('price7').innerHTML = generateRandomNumber(0,99.99); setInterval(assignData, 5000); //every 5 seconds } </script> <body onload="assignData()"> <h2 id="price1"></h2> <h2 id="price2"></h2> <h2 id="price3"></h2> <h2 id="price4"></h2> <h2 id="price5"></h2> <h2 id="price6"></h2> <h2 id="price7"></h2> </body> </html>
解決方案2
1 2017-10-25 02:38:17
我對你的問題的解釋：所有元素以0到99.99之間的隨機值開始，然后每五秒鍾一個隨機選擇的元素將被更新，在當前值的5％內隨機改變其值。 （如果要每五秒更新一個元素，請將隨機選擇更改為循環。）
為了簡化演示片段（單擊“運行代碼片段”以查看它是否有效），我使用了一組<li>元素，我選擇.querySelectorAll("li") ，但是如果你真的想這樣做的話使用元素ID你可以說.querySelectorAll("#price1,#price2,#price3,#price4,#price5,#price6,#price7") 。
function generateRandomNumber(min,max) { return (Math.random() * (max - min) + min).toFixed(2); } // get list of elements: var elements = document.querySelectorAll("li"); // populate all elements initially: [].forEach.call(elements, function(el) { el.innerHTML = generateRandomNumber(0,99.99); }); // update an element at random every second: setInterval(function update() { var element = elements[Math.floor(Math.random() * elements.length)]; var currentVal = +element.innerHTML; element.innerHTML = generateRandomNumber(currentVal * 0.95, currentVal * 1.05); }, 1000);
<ul> <li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul>
請注意，對於演示來說，五秒間隔似乎太慢了，所以我在這里使用了一秒鍾（1000毫秒）。
進一步閱讀：
解決方案3
0 2017-10-25 03:21:39
希望這會有所幫助。
<body>
<p id="price1"></p>
<p id="price2"></p>
<p id="price3"></p>
<p id="price4"></p>
<p id="price5"></p>
<p id="price6"></p>
<p id="price7"></p>
</body>
<script>
//set initial random number for the elements
document.getElementById('price1').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price2').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price3').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price4').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price5').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price6').innerHTML = generateRandomNumber(0,99.99);
document.getElementById('price7').innerHTML = generateRandomNumber(0,99.99);
//set random number to elements with fluctuation +/- 5%
setRandomToElements()
function generateRandomNumber(min,max) {
return (Math.random() * (max - min) + min).toFixed(2);
};
function setRandomToElements(){
//get current prices
var currentPrice1 = parseInt(document.getElementById('price1').innerHTML);
var currentPrice2 = parseInt(document.getElementById('price2').innerHTML);
var currentPrice3 = parseInt(document.getElementById('price3').innerHTML);
var currentPrice4 = parseInt(document.getElementById('price4').innerHTML);
var currentPrice5 = parseInt(document.getElementById('price5').innerHTML);
var currentPrice6 = parseInt(document.getElementById('price6').innerHTML);
var currentPrice7 = parseInt(document.getElementById('price7').innerHTML);
var fluctuation = 0.05;//5%
//random new numbers +/-5% current price
document.getElementById('price1').innerHTML = generateRandomNumber(currentPrice1-(currentPrice1*fluctuation), currentPrice1+(currentPrice1*fluctuation));
document.getElementById('price2').innerHTML = generateRandomNumber(currentPrice2-(currentPrice2*fluctuation), currentPrice2+(currentPrice2*fluctuation));
document.getElementById('price3').innerHTML = generateRandomNumber(currentPrice3-(currentPrice3*fluctuation), currentPrice3+(currentPrice3*fluctuation));
document.getElementById('price4').innerHTML = generateRandomNumber(currentPrice4-(currentPrice4*fluctuation), currentPrice4+(currentPrice4*fluctuation));
document.getElementById('price5').innerHTML = generateRandomNumber(currentPrice5-(currentPrice5*fluctuation), currentPrice5+(currentPrice5*fluctuation));
document.getElementById('price6').innerHTML = generateRandomNumber(currentPrice6-(currentPrice6*fluctuation), currentPrice6+(currentPrice6*fluctuation));
document.getElementById('price7').innerHTML = generateRandomNumber(currentPrice7-(currentPrice7*fluctuation), currentPrice7+(currentPrice7*fluctuation));
setInterval(setRandomToElements, 5000);
}
</script>
解決方案4
0 已采納 2017-10-25 05:56:55
在我提出更好的解決方案之前，我花了一些時間來解決我遇到的遞歸問題。
//<![CDATA[ // external.js function RandNumMaker(min, max, withinPercent, secondsInterval, decimalPlaces){ this.withinPercent = withinPercent || 5; this.secondsInterval = secondsInterval || 5; this.decimalPlaces; if(decimalPlaces){ this.decimalPlaces = decimalPlaces; } var t = this, ia = []; function rb(mn, mx){ return mx-Math.random()*(mx-mn); } var pn = rb(min, max); function rn(){ var p = 1; if(Math.floor(Math.random()*2) === 1)p = -1 return p*(Math.floor(Math.random()*t.withinPercent)+1)/100*pn; } function rf(){ var r, d = t.decimalPlaces; pn += rn(); if(pn < min || pn > max){ return rf(); } r = pn; if(d)r = (Math.floor(Math.round(Math.pow(10, d+1)*r)/10)/Math.pow(10, d)).toFixed(d); return r; } this.setDiv = function(div){ div.innerHTML = rf(); ia = []; var iv = setInterval(function(){ div.innerHTML = rf(); }, this.secondsInterval*1000); ia.push(iv); return this; } this.stop = function(){ for(var i=0,l=ia.length; i<l; i++){ if(ia[i]){ clearInterval(ia[i]); } } ia = []; return this; } } var doc, bod, C, E, N, old = onload; // for use on other loads onload = function(){ if(old)old(); doc = document; bod = doc.body; C = function(tag){ return doc.createElement(tag); } E = function(id){ return doc.getElementById(id); } N = function(className, inElement){ var ii = inElement || doc; var cN = ii.getElementsByClassName(className); if(cN){ return cN; } var tn = ii.getElementsByTagName('*'); for(var i=0,e,a=[],l=tn.length; i<l; i++){ e = tn[i]; if(e.className && e.className === className)a.push(e); } return a; } var sr = new RandNumMaker(0, 99.99), sl = N('slow'); var fr = new RandNumMaker(0, 99.99), fs = N('fast'); sr.decimalPlaces = 2; fr.secondsInterval = 0.1; fr.withinPercent = 5; for(var i=0,l=sl.length; i<l; i++){ sr.setDiv(sl[i]); } for(var i=0,l=fs.length; i<l; i++){ fr.setDiv(fs[i]); } } //]]>
/* extrnal.js */ html,body{ padding:0; margin:0; } body{ background:#000; overflow-y:scroll; } .main{ width:940px; background:#fff; padding:20px; margin:0 auto; }
<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8' /> <meta name='viewport' content='width=device-width' /> <title>test</title> <link type='text/css' rel='stylesheet' href='external.css' /> <script type='text/javascript' src='external.js'></script> </head> <body> <div class='main'> <div class='slow'></div> <div class='slow'></div> <div class='slow'></div> <div class='slow'></div> <div class='slow'></div> <div class='slow'></div> <div class='slow'></div> <hr /> <div class='fast'></div> <div class='fast'></div> <div class='fast'></div> <div class='fast'></div> </div> </body> </html>
應該現在就行！
創建new RandNumMaker(min, max)后，您可以使用簡單賦值設置randomNumMarkerInstance.decimalPlaces ， randomNumMakerInstance.withinPercent和randomNumMakerInstance.secondsInterval 。 randomNumMakerInstance.setDiv(div)啟動它。 randomNumMakerInstance.stop()阻止它。
如果javascript中的值相同，如何再次使用math.random獲得不同的值
[英]How to use math.random again to get a different value if the values are the same in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.