随机颜色初学WebAPI的方法

最新推荐文章于 2023-05-15 20:03:42 发布

得得得得得得得得得得得

最新推荐文章于 2023-05-15 20:03:42 发布

阅读量697

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47298158/article/details/106932414

版权

随机颜色初学WebAPI的方法
下面展示一些 内联代码片。

<style>
 #box {
 width: 500px；
 height: 500px;
 border: 1px solid #000;       
 background-color: aqua;
 transition: all 2s;
 margin: 100px auto;
}
</style>
<body>
 <div id="box"></div>
</body>
<script>
 var body = document.body;
 var box = document.getElementById('box');
 body.onclick = function () {
 var i =Math.random();
 if (i < 0.1) { box.style.backgroundColor = 'blue'; }
 else if (i < 0.2) {box.style.backgroundColor = 'red';} 
 else if (i < 0.3) {box.style.backgroundColor ='magenta';} 
 else if (i < 0.4) {box.style.backgroundColor = 'chartreuse'} 
 else if (i < 0.5) {box.style.backgroundColor = 'yellow'} 
 else if (i < 0.6) {box.style.backgroundColor = 'yellowgreen'} 
 else if (i < 0.7) {box.style.backgroundColor = 'mediumspringgreen'} 
 else if (i < 0.8) {box.style.backgroundColor = 'dodgerblue'} 
 else if (i < 0.9) {ox.style.backgroundColor = 'gold'} 
 else if (i < 1) {box.style.backgroundColor = 'black'}};
 </script>

2
在这里插入图片描述

得得得得得得得得得得得

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机颜色初学WebAPI的方法

随机颜色初学WebAPI的方法下面展示一些内联代码片。<style> #box { width: 500px； height: 500px; border: 1px solid #000; background-color: aqua; transition: all 2s; margin: 100px auto;}</style><body> <div id="box"></div></body&
复制链接

扫一扫