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

接上文：
本文内容简介：
1.随机选择3个车牌并使其变色。
2.按钮的功能补全。
上文回顾：
上文使用了3个函数来完成了车牌的随机产生，存储以及，按照一定间隔生成与表格当中，并且随机产生了3个随机数，
那么接下来就是再设计一个函数，使3个随机数对应的div里的车牌产生变色，
function showDiv(){ //这个函数是变色，找到28个车牌的位置并变初始色，

         suijisan();for (var i=0;i<28 ;i++ ){             //循环获取28个车牌,var x=document.getElementById("div"+i);x.className ="one";}for(var p =0;p<3;p++){         // 这里是找到那3个随机车牌并且变色var div1=document.getElementById("div"+dest[p]);div1.className ="two";}}当然one ,和two 的属性再开头补充了.one{background-color:#99ff00;   /* 背景颜色*/width:120px; /*宽度*/color:#66ccff;height:50px;                          /*高度 */text-align:center;             /* 文本居中*/line-height:50px;                   /*DIV行高 当行高和div高一样时，会水平居中 */font-size:22px;}.two{background-color:#00cc66;   /* 背景颜色*/width:120px; /*宽度*/color:#999933;height:50px;                          /*高度 */text-align:center;             /* 文本居中*/line-height:50px;                   /*DIV行高 当行高和div高一样时，会水平居中 */font-size:22px;}

这一步函数主要是用于寻找随机三个div数对应的车牌并将其变为two设计的属性，中途获取按钮地址，调用计时器，并且通过判断按钮文字来判断是否中止选择。
var btn =document.getElementById(“btn1”); //获取按钮的地址
function al(){
if( btn.value ==“开始”){ //如果文字是开始则执行下一步，
timer=window.setInterval( “showDiv()” ,500); //利用计时器不断选择

      btn.value ="暂停";         //  把文字变成暂停} else{btn.value ="开始";          //把文字变成开始window. clearInterval(timer);  //停止选择}}这个函数完成不要完了调用，在上面的按钮那里调用才可以起到作用style ="width:180px;height:80px;color:#99cccc" onclick="al()" id ="btn1"/>

前端初学之利用html,css，js实现车牌摇号程序(三)相关推荐

前端初学之利用html,css，js实现车牌摇号程序(一)
*三语言介绍: *html:**超文本标记语言,常用来设计网页界面 css:用来给网页排版,加属性之类的, js:浏览器脚本语言, 用来做一些数据存储之类的, 三者组合用来实现一些网页内容, 初学练手 ...
前端初学之利用html,css，js实现车牌摇号程序(二)
接上文,,上文初版固定车牌展示使用了html,和css给初步完成界面,然后就是使用js设计几个函数完成以下功能: 斜体样式1.随机生成车牌,不再使用固定函数,让系统自动生成车牌,并存入固定数组.利用函 ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
前端资源文件（图片 css js）同步到阿里云OSS
前端资源文件(图片 css js)同步到阿里云OSS 需求: 为了实现自动化更新前端资源,前端资源已放到了阿里云OSS,实现自动上传. 思路: 1.因为使用的是php语言开发项目,自然会想到用php实 ...
2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器 MiniBlink的作者是龙泉寺扫地僧 miniblink是什么? (抄了一下龙泉寺扫地僧写 ...
python快速开发框架_GitHub - lee2029/pyui4win: 一个用python实现业务逻辑、用xml和html/css/js描述界面的windows程序的快速开发框架...
pyui4win 一个用python实现业务逻辑.用xml和html/css/js描述界面的windows程序的快速开发框架应用框架 1.pyui4win根据xml/html/js/css创建界面 ...
车牌摇号、限行、交通拥堵未来会通通消失？阿里王坚说利用机器智能可以做到
记者 | 周翔周一的早晨,营长被北京早高峰的洪流裹挟着来到公司,差点迟到! 众所周知,交通拥堵是很多城市难以解决的痛点.对于帝都群众来说,车牌摇号.限行早已习以为常,聚会迟到的理由如果是堵车的话大家 ...
.NET, MVC框架下利用html, CSS,js实现弹出窗口
在前端UI交互过程中,经常会碰到需要弹出对话框的情况.通过html+css+js来自定义对话框是一个不错的方法. 1. 在HTML中,定义一个DIV. 1.1 将Style设置为 display:no ...

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

前端初学之利用html,css，js实现车牌摇号程序(三)相关推荐

最新文章

热门文章