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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
django文档学习之applications使用详解
2018/01/29 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
共产党员公开承诺书
2014/03/25 职场文书
卫生标语大全
2014/06/21 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python