JavaScript--初识Dom对象(猜数字游戏)

最新推荐文章于 2025-03-18 20:02:11 发布

让我在看看

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量155

点赞数

文章标签： javascript 游戏前端

本文链接：https://blog.youkuaiyun.com/qq_51631141/article/details/127657078

版权

1.Dom操作表单请求

第一次操作Js的Dom对象

<script>
    function Demo(){
        let x =  document.forms["myForm"]["fname"].value; //获取表单的值
    if(x == ""){
            alert("表达不能为空");
            return false;  
        }
    }
</script>
<body>
    <form name="myForm"  onsubmit="return Demo()" method="post"> 
    <!--Demo() 返回false就不提交表单-->
        Name: <input type="text" name="fname">
        <input type="submit" value="Submit"> <!--submit 会发生表单请求-->
      </form> 
</form>
</body>

2.猜数字游戏案例

<p>猜数字游戏</p>
<form>
    <input type="text" id="fname">
    <input type="button" onclick="Demo()" value="提交"> 
  </form>
<p id="success"></p>
<img src="图片地址" style="display:none;" id="test"/> <!--图片被隐藏了-->

<script>
function Demo(){
    
   let a= document.getElementById("fname").value;
    let x= a.trim(); //剔除空格
    if(isNaN(x)||x==""){ //判断是否为空和非数字
        alert("不是数字");
    }
    else if(x>88){ 
      alert("数字大了");
    }
    else if(x<88){
        alert("数字小了");
    }else{ //正确的数字为88
        alert("恭喜你猜对了")
        document.getElementById("success").innerHTML="你可真聪明!";
        var newImg=document.getElementById("test");
        newImg.style.display="block"; //把图片显示出来
    }
}
</script>