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 相关文章推荐
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
浅析node.js的模块加载机制
May 25 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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分享朋友圈的实现代码
2019/02/18 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
详解Python中的正则表达式
2018/07/08 Python
Python元组知识点总结
2019/02/18 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python占用的内存优化教程
2019/07/28 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
董事长开业致辞
2015/07/29 职场文书
医院病假条范文
2015/08/17 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
Python 中 Shutil 模块详情
2021/11/11 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers