• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
LilyLiya
博客园    首页    新随笔    联系   管理    订阅  订阅
Random color generator exercise
利用按钮的点击事件和随机数的应用来产生随机颜色对按钮的背景颜色进行动态调控并记录具体rgb值,用到了function

用一个按钮的点击事件来随机产生颜色,并用一个h3来显示动态的rgb的值

如何产生随机颜色:

Math.floor(Math.random() * 255)生成[0,255]的随机数,用rgb(r,g,b)拼接

改变按钮的背景色并在右边显示具体的rgb值。
const btn = document.querySelector('#change_color_btn');
const h3 = document.querySelector('#h3');
btn.addEventListener('click', function () {
    newColor = makeRandColor();
    btn.style.backgroundColor = newColor;
    h3.innerText = newColor;


})

const makeRandColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return `rgb(${r}, ${g}, ${b})`;
}

 

posted on 2021-01-21 08:51  LilyLiya  阅读(87)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3