今天重新看了一般原生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. H5页面如何引入vConsole

    vConsole github地址vConsole 是腾讯开源的项目,这就简单的介绍一下使用 使用npm引入vconsole.min.js下载 vConsole 的最新版本.(不要直接下载 dev 分 ...

  2. OpenCV 读取、修改、保存图像

    代码如下: #include <cv.h> #include <highgui.h> using namespace cv; int main( int argc, char* ...

  3. [LC] 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  5. Django学习之路04

    视图层 小白必会三板斧 HttpResponse render redirect django视图函数必须要给返回一个HttpResponse对象(render和redirect内部返回的也是一个Ht ...

  6. cookie和session实现登录验证

    回话技术,比如在做登录功能的时候,需要配合是用存储在客户端的cookie信息,以及存储在服务端的session来实现登录功能.在cookie中保存了用户的信息,特别是一个特殊的令牌信息,当用户拿着这个 ...

  7. Maven本地仓库在C盘下无法自动下载相关依赖的问题

    打开项目时用管理员权限!!!

  8. 年薪5w和50w的人，区别到底在哪？

    年薪5w和50w的人,区别到底在哪? 2017-02-22 阿青 360投资圈 文/ 阿青 许多人在职场摸爬滚打很多年并不顺利,薪酬一直上不去.职场鸡汤喝了不少,也掌握了不少职场技能,工作经验也颇为丰 ...

  9. Gnu pgp加密解密

    在生成密钥的时候,无法生成足够多的随机数,提示“ Not enough random bytes available. Please do some other work to givethe OS ...

  10. Vue源码之数据驱动（个人向）

    #1.大致流程 # 2.具体流程 数据驱动 New VUE Where:src/core/instance/index.js Do: 1.使用Function实现Vue类 2.调用_init 初始化V ...