关于一个随机叫号demo的总结

随机叫号demo的总结

这个随机叫号是由HTML+CSS+js组成,通过js随机数来传递

1.首先用js弹窗的形式让用户输入班级的排和列.
2.将排列分别放进一个变量中,传给随机数
3.随机生成的数字,有innerHTML在传到页面上,呈现给用户
4.为了用户的体验,设置一个按钮,当用户点击按钮式,随机数重新生成新的数字,并传到页面中.

页面没有过多的渲染,实现相应的功能就ok

下面分析js代码的部分:

window.onload=function(){
	var nbtn1 = document.getElementById('btn1');//获取按钮的id

	var oDiv = document.getElementById("pai");//获取排的div的位置
	var oDiv1 = document.getElementById("lie");//获取列的div的位置
	var name=prompt("你的班级一共几排?");  //通过弹窗让用户输入班级总排数
	var name1 = prompt("你的班级一共几列?");//通过弹窗让用户输入班级总列数
	
 	//var int = (self.setInterval("showRandom()",1000));
 	nbtn1.onclick = function(){   //注册按钮点击事件
 						         //当用户点击按钮时随机生成num   num2  两的随机数,并分别将num num2显示到页面的相应位置.
      var num=parseInt(Math.random()*name+1);
       	oDiv.innerHTML = num;

       var num2=parseInt(Math.random()*name1+1);
    		oDiv1.innerHTML = num2;
    };
 	
	 	
	  
    //(showRandom(name));
    	
 	// nbtn2.onclick= function stop(){
       
  //               clearInterval(move);
  //           };

    //  function showRandom1(n) {
    //   var num2=parseInt(Math.random()*name1+1);
    // 		oDiv2.innerHTML = num1;
    // }
    // oDiv1.innerHTML = (showRandom1(name1));

}
	</script>

获取按钮的id,排列的id,通过document.getElementById 找到位置

当用户点击时,随机生成的数字分别通过innerHTML传到pai lie 中

每次点击都触发一次事件,从而形成了随机数的更新

写的不是太完美,只记录了我的学习历程与自我修炼