html猜数字源码,html+css+javascript_猜数字游戏

效果图：

*{

margin: 0;

padding: 0;

}

.container{

width: 100%;

min-height: 600px;

text-align: center;

}

.one{

width: 100%;

height: 180px;

padding-top: 30px;

background: linear-gradient(to right ,cyan,darkcyan);

}

.two{

width: 100%;

height: 240px;

padding-top: 30px;

background: linear-gradient(to right ,aquamarine,#00FF84);

}

#num_one{

outline: none;/*去除input输入框外边的线条*/

border-radius:20px 20px 20px 20px;

}

.three{

width: 100%;

height:210px;

padding-top: 40px;

background: linear-gradient(to right ,lime,mediumspringgreen);

}

input{

width: 154px;

height: 39px;

}

button{

height: 36px;

width: 75px;

color: #FFFFFF;

font-size: 15px;

border-radius:10px 10px 10px 10px;

background-color: darkslategray;

outline:none;

}

#result{

color:red;

}

.three p{

font-size: 20px;

}

#right{

color: #000000;

}

欢迎登录数字猜猜乐

规则介绍：

系统随机生成一个0~100以内的数

请输入您猜的数，您共有8次机会

请在下面输入您决定的数字：

提交

查看

正确答案：

您输入的数：

当前剩余次数为：次

var randomNum = parseInt(Math.random()*100);

var count =0;

document.getElementById("coun").innerHTML=8;

function sub(){

var num1 = document.getElementById("num_one");

var num2= Number(num1.value);

if(count<=8){//次数

if(randomNum>num2){

count++;

document.getElementById("result").innerHTML="偏小";

document.getElementById("coun").innerHTML=8-count;

}else if(randomNum

count++;

document.getElementById("result").innerHTML="偏大";

document.getElementById("coun").innerHTML=8-count;

}else {

count++;

document.getElementById("result").innerHTML="输入正确";

document.getElementById("coun").innerHTML=8-count;

}

}else{

alert("游戏结束，请重新开始");

}

}

function check(){

document.getElementById("right").innerHTML=randomNum;

}