给出的答案是大约这个样子的
写一个随机生成两位数的js
接着用一个变量记录每次乘的结果
然后给开始按钮绑定个时事件,点击后获取输入框的数字,并开始循环进行相乘
就这三个步骤
新手版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="inputNum" placeholder="请输入数字">
<button onclick="startAndStop(true)">开始</button>
<button onclick="startAndStop(false)">停止</button>
<ul id="content">
</ul>
<script type="text/javascript">
let IntervalId;
let emojArr = ['🍐', '🍑', '🍒', '🍓', '🥝', '🍅', '🥥', '🥑','🍆']
function randomNum (){
return Math.floor(Math.random() * 99 + 1);
}
function startAndStop(flag){
if(flag){
let content = document.getElementById("content")
let sum = randomNum()
document.getElementById("content").innerHTML = ""
<!-- 开始循环计算输出 -->
let time = 0;
IntervalId =setInterval(function(){
time = time + 1;
let startEmoj = getIcon(time)
let endEmoj = emojArr[Math.floor((Math.random()*emojArr .length))]
let inputNum = document.getElementById("inputNum").value
content.append(startEmoj + inputNum + "*" + sum + "=" + (inputNum * sum) + endEmoj )
content.append(document.createElement("br"));
sum = (inputNum * sum)
},1.5*1000)
}else{
document.getElementById("inputNum").value = ""
clearInterval(IntervalId )
}
}
//随机获取图标
function getIcon(time){
let getIcon = ""
for(let i=0; i<time; i++){
getIcon = getIcon + (emojArr[Math.floor((Math.random()*emojArr .length))])
}
return getIcon;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
Multiplier: <input type="text" id="multipleNum" placeholder="请输入乘数">
</p>
<p>
<button onClick="start()">Start</button>
<button onClick="stop()">Stop</button>
</p>
<p id="content"></p>
</body>
<script>
var emojiList = ['🍇','🍈','🍉','🍊','🍋','🍌','🍍','🥭','🍎','🍏','🥨','🥯','🥞','🧇','🧀','🍖','🍗','🥩','🥓', '🍐', '🍑', '🍒', '🍓', '🥝', '🍅', '🥥', '🥑','🍆', '🥔', '🥕', '🌽', '🌶️', '🥒', '🥦', '🧄', '🧅', '🍄', '🥜', '🌰', '🍞', '🥐', '🥖', '🍔', '🍟', '🍕', '🌭', '🥪','🌯','🌮','🥙','🧆','🥚','🍳','🥘','🍲','🥣','🥗','🍿','🧈','🧈','🧂','🥫','🍱','🍘','🍙','🍚','🍛','🍜','🍝','🍠','🍢','🍤']
var timer = null
var times = 0
var list = []
var contentDom = document.getElementById("content")
function getEmoji () {
var _num = Math.floor(Math.random() * (emojiList.length - 1))
return emojiList[_num]
}
function getEmojis (num) {
var res = ''
for (var i =0; i < num; i++) {
res += getEmoji()
}
return res
}
function start () {
times = 0
list = []
contentDom.innerHTML = ''
var multiNum = document.getElementById("multipleNum").value
if (!multiNum) {
alert(`请输入款中填写值`)
return
}
var num = Math.floor(Math.random() * 90) + 10
timer = setInterval(() => {
times += 1
if (times === 1) {
list.push({
headEmo: getEmoji(),
p1: num,
p2: multiNum,
p3: num * multiNum,
footEmo: getEmoji()
})
} else {
var initNum = list[list.length - 1].p3
list.forEach(i => i.footEmo = '')
list.push({
headEmo: getEmojis(times),
p1: initNum,
p2: multiNum,
p3: initNum * multiNum,
footEmo: getEmoji()
})
}
var content = ''
list.forEach(i => {
let { headEmo, p1, p2, p3, footEmo } = i
content += `${headEmo} ${p1} * ${p2} = ${p3} ${footEmo}<br/>`
})
contentDom.innerHTML = content
}, 1500);
}
function stop() {
clearInterval(timer)
}
</script>
</html>