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实现的日期操作类DateTime函数代码
Mar 16 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
javascript document.images实例
2008/05/27 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python如何重载模块实例解析
2018/01/25 Python
Python登录系统界面实现详解
2019/06/25 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
软件工程专业推荐信
2013/10/28 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
房地产推广策划方案
2014/05/19 职场文书
优质服务口号
2014/06/11 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
工厂员工辞职信范文
2015/05/12 职场文书