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 相关文章推荐
重定向实现代码
Nov 20 Javascript
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
javascript 动态参数判空操作
Dec 22 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python 容器总结整理
2017/04/04 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
django框架使用方法详解
2019/07/18 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
劲霸男装广告词
2014/03/21 职场文书
创建文明城市标语
2014/06/16 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
红色旅游心得体会
2014/09/03 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
先进集体申报材料
2014/12/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书