原生js实现的一个随机颜色的简单效果
<!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实现的一个随机颜色的简单效果的更多相关文章
- JS一行代码，生成一个16进制随机颜色，简单粗暴。
var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...
- 原生js实现多个随机大小颜色位置速度小球的碰壁反弹
文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...
- 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~
昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...
- JS多种方法实现随机颜色；
JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- js 给样式添加随机颜色
下面提供了三种获取随机颜色值的方法 方法一: 创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色. function color1(){ var color = "&q ...
- 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
随机推荐
- C#2.0新增功能06 协变和逆变
连载目录 [已更新最新开发文章,点击查看详细] 在 C# 中,协变和逆变能够实现数组类型.委托类型和泛型类型参数的隐式引用转换. 协变保留分配兼容性,逆变则与之相反. 以下代码演示分配兼容性.协 ...
- SQL SERVER Suspect(质疑/挂起) 状态恢复
数据库服务器,在断电时,偶尔会出现Suspect状态,导致数据库无法使用. 解决办法如下: 数据库名带‘[]’可以避免库名中带‘.’等特殊符号的情况. USE [master]GOALTER DATA ...
- python-if条件判断与while/for循环
条件判断if 让计算机像人一样,能判断是非对错,根据条件做一些事情. if ''' ------ if代码结构:------- if 条件: 代码体 tips:同一缩进范围内的代码被视作同一代码体,p ...
- <<Modern CMake>> 翻译 1. CMake 介绍
<<Modern CMake>> 翻译 1. CMake 介绍 人们喜欢讨厌构建系统. 仅仅观看 CppCon17 上的演讲,就可以看到开发人员因为构建系统而闹笑话的例子. 这 ...
- vue项目目录结构详解
项目简介基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.项目包含: 基础库: vue.js.vue-router.vue ...
- iis8 php-cgi.exe - FastCGI 进程意外退出 500错误解决办法
今天iis服务环境下的网站突然显示200错误php-cgi.exe - FastCGI 进程意外退出,昨天还好好的网站正常,这个问题一直偶尔出现几次,不是很频繁,但是偶尔会出现: 这是由于某些加载库加 ...
- 【Git】Found a swap file by the name ".git/.MERGE_MSG.swp"
最近合并分支的时候总是遇到这个问题,导致合并之后还需要再提交一次--有点烦-- 解决方案: 在项目根目录(如/StudioProjects/demo/Leave)下,找到 .git/.MERGE_MS ...
- CTF杂项题解题思路
下载压缩包解压 如果是图片就先查看图片信息 没有有用信息查看图片看是否是一个图片 如果不是图片就将文件进行还原 从还原文件中查找有用信息 例:这是一张单纯的图片 http://123.206.87.2 ...
- python中的赋值操作与C语言中的赋值操作中的巨大差别
首先让我们来看一个简单的C程序: a = ; b = a; b = ; printf("a = %d, b = %d\n", a, b); 相信只要学过C语言, 不用运行程序便能知 ...
- 【Java笔记】【Java核心技术卷1】chapter3 D3数据类型
package chapter3; public class D3数据类型 { public static void main(String[] arg) { //Java 整型(字节数不会随硬件变化 ...