猜数字游戏

最新推荐文章于 2024-08-24 21:25:27 发布

奔跑的前端er

最新推荐文章于 2024-08-24 21:25:27 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/caoxinhui521/article/details/53308295

本文介绍了一个简单的猜数字游戏实现方法，使用HTML、JavaScript完成，并展示了如何利用<marquee>元素制作文字滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分内容

<input type="text" id="number">
<div style="font-size:16px;width:300px;height:30px;background:#fff;margin:10px;margin-left:0px;" id="text"></div>
<input type="button" value="确定" onclick="javascript:btn();" id="button">

js代码功能实现：

var math=Math.floor(Math.random()*100);
        var i = 0;
        var img="<img src='2.png'>";
        function btn(){
        	var text = document.getElementById("text");
        	var val = document.getElementById("number").value;
          var pattern = /[0-9]+/; 
        	if ( !pattern.test(val) ){
	        	alert("请输入数字");
        	};
  	    	if ( val == math ){
  			    alert("恭喜你答对了");
            text.innerHTML="";
            for (var j = 0;j <= i;j++) {
              text.innerHTML+="<img src='1.png'>";
            }
  		    };
          if ( val > math ){
  				alert("太大了");
  				text.innerHTML+=img;
  				i++;
  			};
  			if ( val < math ){
  				alert("太小了");
  				text.innerHTML+=img;
  				i++;
  			};
  			if ( i === 10) {
  				text.innerText="你没有机会了";
  				document.getElementById("button").setAttribute("disabled","disabled");
  			};
      }

设置文字条滚动：

<marquee>我默认向左滚。。。。。</marquee>：默认情况下向左滚动

<marquee scrollamount="2" behavior="alternate" loop="3">来回滚动</marquee>文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）

<marquee direction="up" bgcolor="#CCFF66" width="250" height="55">在区域内滚动，向上</marquee>文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）