前端初学之利用html,css,js实现车牌摇号程序(二)

接上文,,上文初版固定车牌展示使用了html,和css给初步完成界面,然后就是使用js设计几个函数完成以下功能:

斜体样式1.随机生成车牌,不再使用固定函数,让系统自动生成车牌,并存入固定数组。利用函数:init_Array :

*2.*创建div,将数组中的div,设置div的编号和样式,并将带有车牌的div放入到单元格中,利用函数:createDiv :
3随机生成3个数字(因为我们后期需要同时变色3个车牌,判断不重复的前提下放入数组,当然也可以更多):利用函数:suijisan():

init -Array函数主题如下:	var ziMu = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","4","6","8","1","2","9","0","5","3","7");
			var city = new Array("晋","陕","京","冀","鲁","闽","吉","浙","沪","黑","渝","苏","辽","鄂","湘","甘","台","桂");
			var ziMu2 = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","4","6","8","1","2","9","0","5","3","7");
			
			//0           1        2
			var carNum=new Array( 28 );
			//init_Array 函数 给 数组 carNum 中存放 28个随机车牌号
			function init_Array(){
			
			  
				for ( var i = 0 ; i<28 ; i=i+1 )
				{
					var one = Math.floor( Math.random()*90+10 );//生成 2位数 0.0-90.0+10 --[10.0-100.0) [10,99]
					var two = Math.floor( Math.random()*90+10 );//[10,99]
					var a = Math.floor(Math.random()*city.length);//[0,17]
					
					var b = Math.floor(Math.random()*ziMu.length);//[0,25]    2
					var c =Math.floor(Math.random()*ziMu2.length);//3
				
					//动态生成车牌
					
					carNum[i] = city[a]+one+ziMu[b]+ziMu[c]+two; // a = 5 闽  one 12  b = 2 c
				}
			
			}
```以上函数实现的功能就是随机生成一个车牌并且放入到一个固定数组中,然后是第二步,调用前一个函数取得数据并且将数据通过Array函数存入表格,

  init_Array();//调用init_Array函数,意味着 函数{ }里代码执行 ,然后才会有车牌号产生
			
			var x=1;
			var index =0;
			var divId=0;
			function createDiv(){                       //给div里存放数据
				//1.创建div标签 <div></div>
				var obj= document.createElement("div");
				//2.给创建好的div标签添加内容,即添加车牌号    <div>Y79G26</div>
				//obj.innerText = "Y79G24";
				//从数组中取出车牌号放入到div中
				obj.innerText = carNum[index]; // <div >Y79G24</div>
				index = index + 1;
				//设置样式
				obj.className= "one";
				//设置divid
				obj.id="div"+divId;
				divId = divId+1;

				//3.将创建好的带内容的div放置到表格单元格中
				//3.1通过id查找第一个单元格
				var td =document.getElementById("td"+x);
				x = x+1;
				
				//3.2 将创建好的带内容的div放置到第一个单元格td中
				td.appendChild( obj );

				if ( x == 29)
				{
					//停止计时器
					window.clearInterval( timer1 );
					
					x= 1;//(x代表的是表格位置,初始第一个)
                 
				}
			}	var timer = 0;
			var timer1=0;
			// createDiv();//调用createDiv函数,意味着该函数{ }里的代码得到执行
			//每隔1秒执行一次createDiv该函数
			timer1 = window.setInterval( "createDiv()" ,100);
//后面这个计时器作用是通过一定时间来随机产生车牌并且填满表格,
未完待续:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值