1、首先我们打开edit,创建一个空白的html
2、title里写猜数字,然后我们准备写js,两个<script>尖括号,如下图,划红线部分可以根据自己需要更改
3、<script>alert("原创简易猜数字"拘七呷憎);//随意更改var n=parseInt(Math.random()/*生成随机数*/*1000+1);//如果改成*100则为1-100var 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"></p></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> <p>请输入1-1000之间的数字: <input type="text" id="guess"> <input type="button" value="确定" id="btn"></p></div> <script>alert("原创简易猜数字");//随意更改var n=parseInt(Math.random()/*生成随机数*/*1000+1);//如果改成*100则为1-100var 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>