js简易骰子

之前跑团的时候想着要不弄个自己的私人骰子,正好最近在复习js!就写了个简单网页,之后学完了再来扩充功能。
这是页面

<h1>我是一个<span  id="h">骰子</span></h1>		
		<p>你应该按回车骰点,支持rd和rc,例如:
		<strong>rd6或者r2d6或者rc6</strong>分别代表:
		选取1-6的随机数、
		取1-6的2位随机数、
		取1-100随机数,判断6与随机数大小关系。</p>
		
		<div class="form">
		  <select>
			  <option value="">--选择--</option>
		  </select> <br /> -->	  
		  <label for="myNumber">开r: </label>
		  <input type="text" id="myNumber" class="myNumber">
		</div>
		
		<div class="resultParas">
		  <p class="list"></p>
		  <input type="button" value="清空" class="reset">
		  <p class="result"></p>
		  <p class="tOrf"></p>
		</div>

js截取输入框的输入判断格式,用split将左右侧分为不同的字符串数组

 function start()
		  {  //起始函数
		  let number=myNumber.value;
		  
		      function range(a){ 
          	  //输入数字应为1~100
			  if(isNaN(a)){//不应该是a.isNaN而是isNaN(a),a是数
			  	alert("格式错误");
					return false;
			  }	else if(a>100){
				  	alert("输入1~100以内数值");
					return false;
				  }else if(a<=0){
				  	alert("输入1~100以内数值");
					return false;
				  }else {
					 return true;
				  }
			  }
			  
			  
		  	if(number.startsWith("rc")){ //判断输入格式,只能以rc、rd、r1d5的格式				
				let temp=Number(number.substring(2));
				// console.log(temp);
				if(range(temp)){
						check(temp);
				}
			}else if(number.startsWith("rd")){//rd开头
				tOrf.style.visibility='hidden';
				let temp=Number(number.substring(2));
				if(range(temp)){
						let a=randomNumber(temp);
						result.textContent='rd'+temp+": "+a;
				}
			}else if(number.startsWith("r")&&number.split("r")[1]!==""&&number.indexOf("d")!==-1&&number.split("d")[1]!==""){//rd格式
				tOrf.style.visibility='hidden';  
				let temp=number.split("r")[1].split("d");
				let a =Number(temp[0]);
				let b =Number(temp[1]);				
				if(range(a)&&range(b)){				
				rd(a,b);
				 }
			}else{		
				myNumber.value='';
				alert("格式错误");
			     }		  
		    }
		  
		  

函数实现

var name=null;
		function myfun(){
		 name= prompt("你是?",""); //获取弹窗输入内容
		 }
		   
		 window.onload = myfun();	//在打开网页时执行弹窗
		 
		 
		  const myNumber=document.querySelector('.myNumber');		  
		  const result=document.querySelector('.result');
		  const list=document.querySelector('.list');
		  const tOrf=document.querySelector('.tOrf');
		  const reset=document.querySelector('.reset');
		  
		  var count=1;  //计算r点次数
		 
		  
		  function randomNumber(a){
			  return Math.floor(Math.random()*a)+1;			  
		  }   

 function rd(a,b){
			  let tem=[];
			  for(var i=0;i<a;i++){				  
				  tem.push(randomNumber(b));
			    }
			 result.textContent='r'+a+'d'+b+': '+tem;			  
		  }
		  
		  
		  function ifSuccess(a){
			  if(a<=0){
				  return false;
			  }else if(a<=4){
				  return true;
			  }else{
				  return false;
			  }
		  }
		   
		
			function check(a){
			console.log(a);	
			let number=a;
			let rNumber=randomNumber(100);	
			
			tOrf.style.visibility='visible';
			if(count == 1){
				list.textContent='上次骰点:';			
			    }list.textContent +=rNumber+' ';			   
			   result.textContent=name+'骰点:'+rNumber+'/'+number;		   
			   myNumber.style.font='bold';
			   
			if(ifSuccess(rNumber)){				
				tOrf.textContent='大成功!';
				tOrf.style.background='red';
				
			}else if(rNumber<=number){
				tOrf.textContent='成功!';
				tOrf.style.background='yellow';
						
			}else if(rNumber>95){
				tOrf.textContent='大失败!';
				tOrf.style.background='black';
				
			}else{
				tOrf.textContent='失败!';
				tOrf.style.background='dimgrey';			
			}
			count++;					
	      	}
		
		myNumber.addEventListener('keydown',function(e){//回车键监听器
			if(e.keyCode=='13'){
				start();
				myNumber.value='';
				myNumber.focus();}
		});		
		
		reset.addEventListener('click',function(e){//点击监听器
			count=1;
			list.textContent='';
		});
		
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值