今天重新看了一般原生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. JS一维数组、多维数组和对象的混合使用

    转载地址:http://blog.csdn.net/wangyuchun_799/article/details/38460515 引言 这篇文章的主要目的是讲解JavaScript数组和对象的混合使 ...

  2. 吴裕雄--天生自然HTML学习笔记：HTML 列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. leetCode-nSum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  4. 格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式

    每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行.如果想格式化代码后不想让代码换行可以通过以下方式 ...

  5. python 同步与异步的性能区别及实例

    同步与异步的性能区别  1. #coding:utf-8 import gevent def task(pid): """ Some non-deterministic ...

  6. 暑假集训第六周contest1

    51Nod - 1413 权势二进制 题意:就是讲给出一个数n,让你求最少由多少个像0,1,10,11......这样的二进制数相加构成:样例n=9就是由9个二进制1相加组成,我不懂比赛的时候我为什么 ...

  7. echarts饼图字体大小修改

    const option = { tooltip: { trigger: 'item', formatter: "{a} {b}: {c} ({d}%)" }, series: [ ...

  8. jmeter+ant+jenkins 接口自动化测试持续集成（送源码）

     9.1  安装和介绍 JMeter 安装文件路径:https://pan.baidu.com/s/1kVJdnuv. JMeter 是轻量级的开源且稳定的自动化测试工具. 思路:在接口说明文档中整理 ...

  9. Appium移动自动化框架功能概括

    小编说:Appium 是一个移动端自动化测试开源工具,可以针对不同的平台用一套API 来编写测试用例.本文对Appium自动化测试框架的功能进行了概括. 本文选自<软件自动化测试开发>,了 ...

  10. Ubunt 16.04 安装 Beyond compare 4

    1. 下载安装包: 2. 安装步骤 3. 运行并注册 之前Beyond compare 3 只有32位,在Ubunt 16.04上运行效率非常低,所以只有安装最新的Beyond compare 4,安 ...