js实现点击按钮随机生成背景颜色


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码,供大家参考,具体内容如下

通过点击按钮更换整个页面的背景颜色

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{
      width: 150px;
      height: 50px;
      background-color:yellow;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <input type="button" value="点击更换背景颜色" id="btn">
  <!-- 设置按钮 -->
  <script>
    function suiJi(m,n){
      return m+parseInt(Math.random()*(n-m+1))
    }
    //随机生成m-n之间的整数,包含m,n
    function yanSe(){
      var result = "#"
      for(var i = 0; i<6; i++){
        result +=suiJi(0,15).toString(16)
      }
    return result;
    //生成一个随机颜色编码#000000-#ffffff
    }
    var btn = document.getElementById("btn")
    //获取节点
    btn.onclick = function(){
      document.body.style.background = yanSe();
    }
  </script>
</body>
</html>

实现效果,点击按钮可更换颜色

js实现点击按钮随机生成背景颜色

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python让函数不返回结果的方法
2020/06/22 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
孝老爱亲模范事迹
2014/01/24 职场文书
卫生标语大全
2014/06/21 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
避暑山庄导游词
2015/02/04 职场文书
主持人开场白台词
2015/05/29 职场文书
党纪处分决定书
2015/06/24 职场文书