基于JS制作一个网页版的猜数字小游戏_javascript技巧_

请输入您猜的数字：
您已经猜的次数：0
 结果：

 #i1 { box-sizing: border-box; width: 400px; height: 300px; border-style: dashed; border-color:blue; padding: 85px; margin-top: 150px; margin-left: 500px; } 

 var text = document.querySelector("#text");//获取输入元素 var count = document.querySelector("#count");//获取次数元素 var result = document.querySelector(".c1");//获取结果元素 var guessBu = document.querySelector("#guess");//获取“猜”按钮元素 var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素 var sum = 0;//猜的总次数 

var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数

 guessBu.onclick = function(){ //给“猜”按钮绑定点击功能 sum++; count.innerHTML = sum; var userGuess = parseInt(text.value);//获取输入的数字 if(userGuess > guessNumber){ //如果输入大于系统生成数字 result.innerHTML = "很遗憾，您猜大了！"; result.style.color = "red"; //调正颜色为红色 }else if(userGuess < guessNumber){//如果输入小于系统生成数字 result.innerHTML = "很遗憾，您猜小了！"; result.style.color = "red"; }else { //输入等于系统生成数字 result.className = "c2"; result.innerHTML = "恭喜您，您猜对了！"; result.style.color = "green";//调整颜色为绿色 } }

 reBu.onclick = function(){//给“重新开始”按钮绑定点击事件 guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数 sum = 0;//猜的总次数置0 count.innerHTML = sum;//将0填充 result.innerHTML = "";//结果置空 text.value = "";//输入框置空 } 

请输入您猜的数字：
您已经猜的次数：0
 结果：