猜数字游戏

猜数字游戏

界面：

初始状态

运行时

css:

<style> #body{ width: 500px; height: 400px; background: url(img/timg.jpg) no-repeat; background-size: cover; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 5px dotted chocolate; box-shadow: 10px 10px 10px #FFDAB9; border-radius: 10px; } #title{ height:50px; font: arial; } #rule{ height:20px; color: red; font-size: 15px; font: arial; margin-left: 10px; } #hint{ width: 200px; height: 200px; border-radius: 50%; background-color: peachpuff; margin: auto; position: relative; font: 50px; line-height: 200px; box-shadow: 5px 5px 5px coral; } #count{ margin: 10px ; font-size: 20px; font: arial; } #inputNum{ width: 500px; height: 200px; margin: 10px; } #num{ width: 350px; height: 40px; } .button{ width: 50px; height: 45px; } .close { width: 38px; height: 37px; position: absolute; top: 0; right: 0; background: url(img/关闭.png); background-position: 0px -1px; } .close:hover { width: 38px; height: 37px; position: absolute; top: 0; right: 0; background-position: -43px -1px; cursor:pointer; } style>

html:

<div class="close" onclick="close0();">
    <a href="#">a>
div>
<div id="title" align="center"><h1>欢迎来到数字猜猜乐h1>div>
<div id="rule">规则：随机生成 1~100，看看几次能猜对啊！div>
<div id="hint" align="center" style="font-size: 30px;">div>
<div id="count">
    <span class="countt">已猜次数：span>
    span>
div>
<div id="inputNum">
    <input type="text" placeholder="请输入数字" id="num" onfocus="this.select();" onmouseup="this.select();" />
    <button type="button" class="button" onclick="game()">提交button>
div>

js:

<script> var num1 = parseInt(Math.random()*101); var count = 0; console.log(num1); document.getElementsByClassName("countv")[0].innerText = count; function game(){ count++; document.getElementsByClassName("countv")[0].innerText = count; var num = (document.getElementById("num").value); if(num==num1){ var b = confirm("恭喜你答对了,要不要再来一次啊 @v@ "); if(b){ count = 0; document.getElementsByClassName("countv")[0].innerText = count; document.getElementById("hint").innerHTML = ""; num1 = parseInt(Math.random()*101); console.log(num1); }else{ window.location.href="http://127.0.0.1:8020/Demo05/gameMain.html"; } }else if(num<num1){ document.getElementById("hint").innerHTML = "猜小啦！~_~"; }else if(num>num1){ document.getElementById("hint").innerHTML = "猜大啦！n_n"; } } function close0() { document.getElementById("body").style.display = 'none'; }; script>