js生成随机颜色方法代码分享(三种)

 更新时间:2016年12月29日 15:45:01   作者:li_han  
本文主要分享了js三种生成随机颜色方法代码,具有一定的参考价值,需要的朋友一起来看下吧

话不多说,请看代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
  <button id="btn1">调用第一种</button>
  <button id="bnt2">调用第二种</button>
  <button id="btn3">调用第三种</button>
  <script>
   var btn1=document.getElementById('btn1');
   btn1.onclick=function(){
    document.body.style.background=bg1()
   };
   var btn2=document.getElementById('bnt2');
   btn2.onclick=function(){
    document.body.style.background=bg2();
   };
   var btn3=document.getElementById('btn3');
   btn3.onclick=function(){
    document.body.style.background=bg3();
   };
   function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
   }
   function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
   }
   function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
   }
  </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JavaScript伸缩的菜单简单示例

    JavaScript伸缩的菜单简单示例

    伸缩的菜单,想必大家都有见到过吧,实现方法也是很多的,在接下来的文章中为大家介绍下使用js是如何实现的,需要的朋友可以参考下
    2013-12-12
  • uniapp uni-swipe-action 滑动操作状态恢复功能实现

    uniapp uni-swipe-action 滑动操作状态恢复功能实现

    按照uni-app官方文档的写法,当前一条滑动确认之后页面列表刷新但是滑动的状态还在,我们需要在滑动确认之后 页面刷新 滑动状态恢复,下面小编给大家分享uniapp uni-swipe-action 滑动操作状态恢复功能实现,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • js图片轮播手动切换特效

    js图片轮播手动切换特效

    这篇文章主要为大家详细介绍了js图片轮播手动切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 如何使用Bootstrap 按钮实例详解

    如何使用Bootstrap 按钮实例详解

    本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。具体通过本文实例详解
    2017-03-03
  • javascript实现异形滚动轮播

    javascript实现异形滚动轮播

    这篇文章主要为大家详细介绍了javascript实现异形滚动轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • jquery及js实现动态加载js文件的方法

    jquery及js实现动态加载js文件的方法

    这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下
    2016-01-01
  • js实现拖拽效果

    js实现拖拽效果

    本文主要是为了让大家更好的理解js的面向对象,通过实现拖拽效果向大家展示js面向对象,非常不错,这里推荐给大家。
    2015-02-02
  • 如何使用require.context实现优雅的预加载

    如何使用require.context实现优雅的预加载

    这篇文章主要介绍了使用require.context实现优雅的预加载 ,需要的朋友可以参考下
    2023-05-05
  • 微信小程序实现多行文字滚动

    微信小程序实现多行文字滚动

    这篇文章主要为大家详细介绍了微信小程序实现多行文字滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS组件库AlloyTouch实现图片轮播过程解析

    JS组件库AlloyTouch实现图片轮播过程解析

    这篇文章主要介绍了JS组件库AlloyTouch实现图片轮播组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论