中能建西北城市建设门户网站,建立网站视频教程,wordpress怎么私人媒体库,蛋糕店网站建设模版一. 网络游戏简介
在输入框内输一个数字#xff0c;点击后面的“猜”按钮#xff0c;系统会根据你猜的数字的大小#xff0c;返回你是猜大猜小还是猜正确#xff0c;系统还会统计你猜的次数#xff0c;在猜数字的途中你点击按钮随时可以重新开始游戏
页面框架#xff1…一. 网络游戏简介
在输入框内输一个数字点击后面的“猜”按钮系统会根据你猜的数字的大小返回你是猜大猜小还是猜正确系统还会统计你猜的次数在猜数字的途中你点击按钮随时可以重新开始游戏
页面框架
body div idi1 span请输入您猜的数字/span input typetext idtext input typebutton value猜 idguess br span您已经猜的次数/span span idcount0/span br 结果span classc1/span br br input typebutton value重新开始游戏 idreBu /div /body
页面简单样式 #i1 { box-sizing: border-box; width: 400px; height: 300px; border-style: dashed; border-color:blue; padding: 85px; margin-top: 150px; margin-left: 500px; } 使用document.querySelector()获取页面上的元素 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;//生成随机数
说明Math.random()随机生成[0,1)的数字乘上100范围为[0,100)加上1范围为[1,101)使用Math.floor()去掉小数部分最后生成数字的范围为[0,100]
给“猜”按钮绑定点击事件
点击按钮后启动比较功能首先将猜的总次数sum并将sum设置到页面中需要先用parseInt()将输入框的内容转为整数再进行比较若输入的数大则将提示颜色调整为红色并设置到页面中若输入的数小则将提示颜色调整为红色并设置到页面中若输入的数为系统生成的随机数则将提示信息调整为绿色并设置到页面中 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;//调整颜色为绿色 } }
