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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
js表格分页实现代码
Sep 18 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
原生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 获取页面中指定内容的实现类
2014/01/23 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
原生js开发的日历插件
2017/02/04 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python3中的2to3转换工具使用示例
2015/06/12 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
前台接待员岗位职责
2014/01/02 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
2014国培学习感言
2014/03/05 职场文书
岗位廉政承诺书
2014/03/27 职场文书
法人授权委托书范本
2014/04/04 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
父母教会我观后感
2015/06/17 职场文书
2015教师节通讯稿
2015/07/20 职场文书
关于python中模块和重载的问题
2021/11/02 Python