今天重新看了一般原生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. SQL提高性能

    1.对外键建立索引,大数据量时性能提高明显(建索引可以直接[Merge Join],否则还须在查询时生成HASH表作[Hash Join]) 2.尽量少使用inner join,使用left join ...

  2. 林轩田机器学习基石笔记3—Types of Learning

    上节课我们主要介绍了解决线性分类问题的一个简单的方法:PLA.PLA能够在平面中选择一条直线将样本数据完全正确分类.而对于线性不可分的情况,可以使用Pocket Algorithm来处理.本节课将主要 ...

  3. 双股同时上市！小米IPO是想要玩场大的？

    ​近日,据相关媒体报道,有相关人士称小米IPO最终可能敲定A+H股两地发行.但目前还未得到小米官方证实.此前关于小米要上市的消息已经流传已久了,从雷军刚开始的矢口否认到后来的默认,再到后来相关消息愈来 ...

  4. CHI 2015大会：着眼于更加个性化的人机交互

    2015大会:着眼于更加个性化的人机交互" title="CHI 2015大会:着眼于更加个性化的人机交互"> 本周,人机交互领域的顶级盛会--2015年ACM C ...

  5. QQbug--QQ截图不显示保存类型

    QQ软件bug--QQ截图不显示保存类型,设置显示后缀名也没用 问题:     QQ截图截后,不通过对话框直接保存时,不显示保存类型,文件名下面的类型的框框是一片空白,在文件夹选项设置显示后缀名也没用 ...

  6. 浅谈JobExecutionContext & JobDataMap

    JobExecutionContext是什么? 当Scheduler调用一个Job,就会将JobExecutionContext传递给Job的 execute() 方法: Job能通过JobExecu ...

  7. Docker容器时间同步问题

    具体操作: 为了保证容器和宿主机之间的时间同步,采用如下参数:-v /etc/localtime:/etc/localtime:ro但是在页面访问的时候时间依然相差8个小时: 该怎么破解! 回复: 1 ...

  8. OpenGL ES 学习笔记 - Overview - 小旋的博客

    移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...

  9. 曹工说Spring Boot源码（21）-- 为了让大家理解Spring Aop利器ProxyFactory，我已经拼了

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  10. GDB调试系列之了解GDB

    想要熟练利用GDB进行程序调试,首先要了解什么是GDB. 1. 什么是GDB GDB (the GNU Project Debugger) 是一个可以运行在大多数常见的UNIX架构.Windows.M ...