<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <title></title>

         <style>

           table{

               width:100%;

               /* border:1px solid #000; */

               border-collapse: collapse;

           }

           td{

               /* border:1px solid #000; */

               height:10px;

           }

         </style>

     </head>

     <body>

       <table id="tab"></table>

       <button onclick="start()">继续</button>

     </body>

     <script>

         var clr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];

         var tab=document.getElementById("tab");

        for(var i=0;i<15;i++){

            var r=document.createElement("tr");

            tab.appendChild(r);

            for(var j=0;j<25;j++){

                var cc="#"

             for(var z=0;z<6;z++){

                var n=Math.floor(Math.random()*16);

                cc+=clr[n];

             }

              var d=document.createElement("td");

              d.style.background=cc;

              tab.children[i].appendChild(d);

            }

        }

        function changeColor(ccc){

            var dd=document.getElementsByTagName("td");

            for(var i=0;i<dd.length;i++){

             if(ccc){

                 dd[i].style.background=ccc;

             }else{

                 var cc="#"

                 for(var z=0;z<6;z++){

                 var n=Math.floor(Math.random()*16);

                 cc+=clr[n];

                 }

                 dd[i].style.background=cc;

             }

            }

        }

     var b;

     function start(){

       clearInterval(b);

       b=setInterval("changeColor()",100);

     }

        tab.onclick=function(e){

              var that=e.target

              if(that.nodeName=="TD"){

                 var ys=that.style.background;

                 clearInterval(b);

                 changeColor(ys);

              }

            }

     </script>

 </html>

原生js实现的一个随机颜色的简单效果的更多相关文章

  1. JS一行代码，生成一个16进制随机颜色，简单粗暴。

    var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...

  2. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  3. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  4. JS多种方法实现随机颜色；

    JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...

  5. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. js 给样式添加随机颜色

    下面提供了三种获取随机颜色值的方法 方法一: 创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色. function color1(){ var color = "&q ...

  8. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

  9. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

随机推荐

  1. 关于Redis的几件小事 | 高并发和高可用

    如果你用redis缓存技术的话,肯定要考虑如何用redis来加多台机器,保证redis是高并发的,还有就是如何让Redis保证自己不是挂掉以后就直接死掉了. redis高并发:主从架构,一主多从,一般 ...

  2. 在pom.xml中的dependencies点击add怎么没有搜索到相关jar包

    1.eclipse菜单 window-> show view –> other –> Maven 2.在打开的窗口里,右键 local repositories –> loca ...

  3. 牛客第十场Rikka with Prefix Sum

    由于其中的2操作非常多,我们就需要将其快速的更改,就会用到组合数的东西 其实自己手写一下就可以发现对于一个点增加的值在经过不断地前缀和累加过程中对于一点的贡献满足杨辉三角 所以我们就需要记录一下其中的 ...

  4. [系列] Go gRPC Hello World

    目录 概述 四类服务方法 安装 写个 Hello World 服务 推荐阅读 概述 开始 gRPC 了,这篇文章学习使用 gRPC,输出一个 Hello World. 用 Go 实现 gRPC 的服务 ...

  5. JAVA从零学习 第一天 邮箱ych1102@163.com QQ382993199

    学习编程  听说读写 寻寻渐进   要准备好长期蒙蒙的状态  延迟3个月后明白 机器语言 二级制 1010  1100 0011 汇编语言 助记词表达程序   机器如果执行就需要编译  汇编语言移植性 ...

  6. itextpdf 解析带中文的html问题

    官网连接 官网上有很多DEMO,下面就说几个我碰到的问题! Question: 1. 中文不显示 或者是乱码(本打算用Apache pdfbox来实现业务,但是折腾了一个上午也没解决中午乱码问题,就找 ...

  7. .net持续集成sonarqube篇之 sonarqube与jenkins集成(插件模式)

    系列目录 Jenkins通过插件集成Sonarqube 通过上一节我们了解了如何配置以使jenkins ci环境中可以执行sonarqube构建,其实Sonarqube官方也提供了jenkins插件以 ...

  8. Java学习-内存划分及内存的调用关系

    一.JAVA内存划分 JAVA的内存可以划分为五个部分:堆.栈.方法区.本地方法区和寄存器. 堆(Heap):凡是new出来的东西都在堆中 如: integer = new Integer(2) // ...

  9. dubbo异常处理

    dubbo异常处理 我们的项目使用了dubbo进行不同系统之间的调用. 每个项目都有一个全局的异常处理,对于业务异常,我们会抛出自定义的业务异常(继承RuntimeException). 全局的异常处 ...

  10. gradle脚本源码查看环境搭建

    背景 我刚入门学习gradle时,网上资料都是说通过gradle的api查看并学习脚本编写,但是api一般只有接口说明,并不能深入了解各个api的实现逻辑,有时就会对一些脚本的写法感到疑惑.通过搭建源 ...