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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
移动端js图片查看器
Nov 17 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
微信小程序组件传值图示过程详解
2019/07/31 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python字符串对其居中显示的方法
2015/07/11 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
国庆节活动总结
2014/08/26 职场文书
党员评议个人总结
2014/10/20 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
孝女彩金观后感
2015/06/10 职场文书
小学班主任研修日志
2015/11/13 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
深入理解 Golang 的字符串
2022/05/04 Golang
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript