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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
php curl 上传文件代码实例
2015/04/27 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
python中assert用法实例分析
2015/04/30 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python集合操作方法详解
2020/02/09 Python
python实现随机加减法生成器
2020/02/24 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
关于建议书的格式范文
2014/05/20 职场文书
计算机求职信
2014/07/02 职场文书
2014年应急工作总结
2014/12/11 职场文书
党员民主生活会材料
2014/12/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
工程主管竞聘书
2015/09/15 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android