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功能实现的RSS Reader 代码
Sep 03 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
JavaScript实现轮播图效果
Oct 30 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
医院员工辞职信范文
2015/05/12 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Java死锁的排查
2022/05/11 Java/Android