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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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动态生成虚拟现实VRML网页
2006/10/09 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python格式化字符串实例总结
2014/09/28 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python class的继承方法代码实例
2020/02/14 Python
浅析python实现动态规划背包问题
2020/12/31 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
C#面试题问题集
2016/04/02 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
小学教师的自我评价范例
2013/10/31 职场文书
爱护公物演讲稿
2014/09/09 职场文书
合作意向协议书
2015/01/29 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers