JavaScript猜数字小游戏搭建
1、首先我们打开edit，创建一个空白的html
2、title里写猜数字，然后我们准备写js，两个<script>尖括号，如下图，划红线部分可以根据自己需要更改
3、<script>
alert("原创简易猜数字");//随意更改
var n=parseInt(Math.random()/*生成随机数*/*1000+1);//如果改成*100则为1-100
var btn=document.getElementById("btn");//获取id'btn'的值
btn.onclick/*鼠标点击事件*/=function(){
var guess=document.getElementById("guess").value;//获取input id'guess'
if(guess>n){//判断输入的数字与随机数的大小
alert("数貌似有点大了");}else if(guess<n){
alert("数貌似有点小了呢");}else if(guess==n){
alert("哇，你猜对了")}else{
alert("注意是1-1000之间的数哦")}
}
//别急，还有html
</script>
4、<div class='bg'>
<p align="center" class="notice">请输入1-1000之间的数字：
<input type="text" id="guess">
<input type="button" value="确定" id="btn">
</div>
5、以下是css部分，不加的话基础功能以满足，但是页面会很不美观
<style>
.bg{
height:700px;
width:100%;
background-color:skyblue;
}
p{font-size:24px;color:white;}
input{height:50px;font-size:30px;border-radius:30px;}
</style>
下图为html原版和css最终效果图
6、以下为全部源码整理，大家也可以根据实际需要自己改
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style>
.bg{
height:700px;
width:100%;
background-color:skyblue;
}
p{font-size:24px;color:white;}
input{height:50px;font-size:30px;border-radius:30px;}
</style>
<div>
请输入1-1000之间的数字：
<input type="text" id="guess">
<input type="button" value="确定" id="btn">
</div>
<script>
alert("原创简易猜数字");//随意更改
var n=parseInt(Math.random()/*生成随机数*/*1000+1);//如果改成*100则为1-100
var btn=document.getElementById("btn");//获取id'btn'的值
btn.onclick/*鼠标点击事件*/=function(){
var guess=document.getElementById("guess").value;//获取input id'guess'
if(guess>n){//判断输入的数字与随机数的大小
alert("数貌似有点大了");}else if(guess<n){
alert("数貌似有点小了呢");}else if(guess==n){
alert("哇，你猜对了")}else{
alert("注意是1-1000之间的数哦")}
}
//别急，还有html
</script>
</body>
</html>
