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 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
原生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
destoon实现调用热门关键字的方法
2014/07/15 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python查看模块,对象的函数方法
2018/10/16 Python
python从子线程中获得返回值的方法
2019/01/30 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python定义一个Actor任务
2020/07/29 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
设计大赛策划方案
2014/06/13 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
学校捐款活动总结
2015/05/09 职场文书