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 日期验证正则附asp日期格式化函数
Sep 11 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
node.js实现端口转发
Apr 14 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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跳转页面的几种实现方法详解
2013/06/08 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
产品质量承诺书
2014/03/27 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
css3 选择器
2022/05/11 HTML / CSS