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 相关文章推荐
使用AngularJS实现表单向导的方法
Jun 19 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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比较两个绝对时间的大小
2014/01/31 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
python写入xml文件的方法
2015/05/08 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
浅谈Python 递归算法指归
2019/08/22 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python em算法的实现
2020/10/03 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
《夜晚的实验》教学反思
2014/02/19 职场文书
公司保密承诺书
2014/03/27 职场文书
绿色学校实施方案
2014/03/31 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年电厂工作总结
2014/12/04 职场文书
十二生肖观后感
2015/06/12 职场文书
法制工作总结2015
2015/07/23 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技