【猜字游戏】

最新推荐文章于 2024-11-01 16:54:21 发布

夜星639

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量4.3k

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_65923595/article/details/123772467

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #display{
          background-color: blueviolet;
          color: white;
          font-size: 16px;
          font-weight: bold;
        }
    </style>
</head>
<body>
    <input type="text" id="myIn">
    <input type="button" value="猜数" id="btn"> 
    <label id="display"></label>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            var myInput = document.getElementById("myIn");
            var myDisplay = document.getElementById("display");
            var myrandom = Math.floor(Math.random()*100);
            btn.onclick = function(){
             myValue = myInput.value;
             if(isNaN(myValue)){
                 myDisplay.innerHTML = "请0-100输入数字";
             }else if(myValue > myrandom){
                 myDisplay.innerHTML = "数字大了"
             }else if(myValue < myrandom){
                 myDisplay.innerHTML = "数字小了"
             }else{
                 myDisplay.innerHTML = "恭喜您，输入正确"
             }
            }
        }
    </script>
</body>
</html>

效果如图