js实现九宫格的随机颜色跳转


Posted in Javascript onFebruary 19, 2017

效果如下:

 js实现九宫格的随机颜色跳转

图(1)  初始图

js实现九宫格的随机颜色跳转

图(2)  开始闪

代码如下:

<!DOCTYPE html>
<html>
<head>
 <title>九宫格</title>
 <style type="text/css">
 div{
 width:190px;
 height:190px;
 background:#FFA600;
 float:left;
 margin:10px;
 border-radius: 10px;
 }
 body{
 width:700px;
 margin:0 auto;
 }
 button{
 clear:both;
 width:200px;
 height:50px;
 background:#FFF;
 border:none;
 border-radius:10px;
 position:relative;
 left:100px;
 }
 button:hover{
 background:#FFA600;
 }
 </style>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <button id="btnone">开始闪</button>
 <button id="btntwo">结束闪</button>
 <script type="text/javascript" >
 var div=document.getElementsByTagName('div');
var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];
btnone.onclick=function(){//点击开始
 c=setInterval(function(){//使用定时器
 start();//调用函数
 },1000)//设置时间
}
btntwo.onclick=function(){//停止按钮的
 for(i=0;i<div.length;i++){//循环
 div[i].style.background="#FFA600";//遍历清除颜色
 }
 clearInterval(c);//停止定时器
}
function start(){
 for(var i=0;i<div.length;i++){//每次随机颜色时遍历将背景设置好
 div[i].style.background="#FFA600";
 }
 var arr=new Array(3);//创建数组容纳随机数
 var arr1=new Array(3);
 for(var i=0;i<arr.length;i++){//创建第一组数组
 var a=parseInt(Math.random()*9); 
 console.log(a);
 if(i==0){//第一个数字直接导入数组
 arr[i]=a;
 }else{
 for(var j=0;j<i;j++){//第二个与第三个数字进行判断
 if(a==arr[j]){//如果重复从新开始
  i--
 }else{
  arr[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr1.length;i++){//同上。随机颜色
 var a=parseInt(Math.random()*9); 
 if(i==0){
 arr1[i]=a;
 }else{
 for(var j=0;j<i;j++){
 if(a==arr1[j]){
  i--
 }else{
  arr1[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr.length;i++){
 div[arr[i]].style.background=colors[arr1[i]];//将随机的颜色给随机的地址
 }
}
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS取request值以及自动执行使用示例
Feb 24 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Jqprint实现页面打印
Jan 06 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
原生JS实现垂直手风琴效果
Feb 19 #Javascript
js鼠标移动时禁止选中文字
Feb 19 #Javascript
canvas雪花效果核心代码分享
Feb 19 #Javascript
Ajax和Comet技术总结
Feb 19 #Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
eBay加拿大站:eBay.ca
2019/06/20 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
《小松树和大松树》教学反思
2014/02/20 职场文书
中国入世承诺
2014/04/01 职场文书
房屋出售授权委托书
2014/10/12 职场文书
先进教师个人总结
2015/02/11 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python