javaScript点击鼠标改变背景颜色

嘉的博客

已于 2022-02-25 21:17:43 修改

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html javascript 文章标签： javascript css color js

于 2020-08-16 14:24:57 首次发布

本文链接：https://blog.csdn.net/heikerx/article/details/108035995

html 同时被 2 个专栏收录

7 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript编写HTML，实现通过点击屏幕不同位置来改变网页背景颜色的功能，用户可以获取到对应的RGB颜色值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了方便的选择RGB数值代表的颜色，写了个HTML, 鼠标点击屏幕不同位置来改变背景颜色, 得到rgb数值。

在这里插入图片描述
下面是HTML代码，可以把以下代码粘贴到记事本，把后缀txt修改为html,
再用浏览器打开就可以查看运行效果

<script>
   function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
document.addEventListener('click',function(e){
    
    var a=Math.ceil(e.clientX/document.documentElement.clientWidth*255);
    var b=Math.ceil(e.clientY/document.documentElement.clientHeight*255);
    document.getElementById('X').innerHTML=a;
    document.getElementById('Y').innerHTML=b;
    document.bgColor=rgbToHex(a,b,255);
}) 
</script>

<html>
    <head>
        <title>123</title>
    </head>
    <body >
       
    <h1>click mouse to change background color; chrome下测试 is better)</h1>
        <span id='X'>1</span>
        <span id='Y'>1</span>
        <span id='Z'>255</span>
    </body>
</html>