今天重新看了一般原生js教程，看到一个例子 是点击按钮改变背景色。

我就改进了一下 点击按钮换一个颜色 并把色号给显示出来

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<input type="button"
onclick="changeColor()"
value="修改背景颜色">
<p id="demo">

</p>
<script>
function changeColor(){
var x1 = Math.random()*10
var y1 = Math.floor(x1)
var x2 = Math.random()*10
var y2 = Math.floor(x2)
var x3 = Math.random()*10
var y3 = Math.floor(x3)
var x4 = Math.random()*10
var y4 = Math.floor(x4)
var x5 = Math.random()*10
var y5 = Math.floor(x5)
var x6 = Math.random()*10
var y6 = Math.floor(x6)
var z = '#' + y1 + y2 + y3 + y4 + y5 + y6
document.getElementById('demo').innerHTML=z
document.body.style.background=z
}
</script>

</body>
</html>

改进：

实际操作色号只会在0-9间随机产生 不符合16进制色号，修改一下JS

function changeColor(){
var colors = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
var x1 = Math.random()*16
var y1 = Math.floor(x1)
var x2 = Math.random()*16
var y2 = Math.floor(x2)
var x3 = Math.random()*16
var y3 = Math.floor(x3)
var x4 = Math.random()*16
var y4 = Math.floor(x4)
var x5 = Math.random()*16
var y5 = Math.floor(x5)
var x6 = Math.random()*16
var y6 = Math.floor(x6)
var z = '#' + colors[y1] + colors[y2] + colors[y3] + colors[y4] + colors[y5] + colors[y6]
document.getElementById('demo').innerHTML=z
document.body.style.background=z
}

这样就完美实现所有色号实现。

js随机背景色 并显示色号的更多相关文章

  1. SQL随机查询，显示行号，查询数据段

    1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用临时表,但在SQL Se ...

  2. SQL查询显示行号、随机查询、取指定行数据

    转自:walkingp 1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用 ...

  3. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. webstorm显示行号，结构预览

    1,代码结构浏览menu>view>file structure popupwindwows>tool windws >structure (alt+7)代码结构当JS代码量很 ...

  5. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  6. Bootstrap-table 显示行号

    趁热打铁,使用bootstrap-table时,想要显示每行的行号,再网上查了查,网上给的显示行号的大部分方法,只要一翻页,行号就会又从1开始计算, 也许没有碰到想要的,自己试着解决了这个问题,本人初 ...

  7. iOS根据16进制的色号来设置颜色，适合封装工具类

    iOS中有时候UI给的一个色号就像 #54e1b7 这个,而我们一般设置颜色都是根据RBG来设置的,所以这里需要把这个16进制的色号转为RGB值,这里我们就使用一下的方法来调用设置颜色. + (UIC ...

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. vc6.0如何显示行号以及出现版本不兼容问题

    有时编译时,提示某某行有错,但是要定位到某一行的话,如果在编辑页面能够将行号显示出来,查找也就更方便了,下面我来介绍一下让VC6.0显示行号的方法.   工具/原料   VC6.0.显示行号的插件 方 ...

随机推荐

  1. PyTorch模型加载与保存的最佳实践

    一般来说PyTorch有两种保存和读取模型参数的方法.但这篇文章我记录了一种最佳实践,可以在加载模型时避免掉一些问题. 第一种方案是保存整个模型: 1 torch.save(model_object, ...

  2. python的列表list和集合set操作

    以下是一些python的list和set的基本操作 1.list的一些操作 list = [1, 2, 3] list.append(5) print(list) list.extend([7, 8] ...

  3. 吴裕雄--天生自然python学习笔记：Beautiful Soup 4.2.0模块

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时 ...

  4. C++二级指针和指针引用传参

    前提 一级指针和引用 已经清晰一级指针和引用. 可参考:指针和引用与及指针常量和常量指针 或查阅其他资料. 一级指针和二级指针 个人觉得文字描述比较难读懂,直接看代码运行结果分析好些,如果想看文字分析 ...

  5. 在腾讯云服务器上安装JDK+Tomcat并启动tomcat

    由于Java web项目需要使用到tomcat所以决定在腾讯云服务器(centos7.X)上安装JDK和tomcat,来部署我们的项目. 准备工具: 云服务器:centos7.x+ 本地连接服务器:X ...

  6. 序列化模块ModelSerializer上补充及ListSerializer

    整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py """ 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验,校验的数据应该在 ...

  7. cookie存在哪里？？？

    平时各位在做项目时多半时候都会用到客户端的cookie,可大家知道cookie是存储在哪里吗? 首先cookie失效分为2种: 1:设置过期时间失效(只要设置了过期时间cookie就会存储在硬盘里面) ...

  8. Redis过期key淘汰策略

    Redis采用惰性+定期的key淘汰策略 1. Redis配置项hz定义了serverCron任务的执行周期,默认为10,即CPU空闲时每秒执行10次; 2. 每次过期key清理的时间不超过CPU时间 ...

  9. 《人性与暴力-论暴力侵略》ER

    card level 人名卡 反常识卡 世界发生了什么? - 信息爆炸 信息与信任构成了人类发展两大命题 人性史与暴力史 未来世界会变得怎么样?- 历史不会重复,但会押韵.暴力呈现下降. 改变世界的三 ...

  10. Windows 下 LaTeX 手动安装宏包（package）以及生成帮助文档的整套流程

    本文简单介绍如何手动安装一个 LaTeX 宏包. 一般来说,下载的 TeX 发行版已经自带了很多宏包,可以满足绝大部分需求,但是偶尔我 们也可能碰到需要使用的宏包碰巧没有安装的情况,这时我们就需要自己 ...