联系方式
- 热线: 15891712396
- 邮箱: gcode@qq.com
- 地址: 西安航天六院陕西航天职工大学计算机系
提供职业教育管理&竞赛现场打分展示&智能办公等
领域的服务方案及相关咨询
搜索
相关:
搜索
Global:
知识是通向未来的桥梁
博客是管理知识的手段
高级培训
- 时间 2024/3/20 17:59:37
- 阅次 834
- 标签 前端
通过前端脚本改变颜色是一种比较灵活的改变颜色的方法
颜色可以通过各种途径来修改.下面这个案例,用了两种测试途径:通过[随机]方法产生颜色,通过[递增]方法产生颜色。
管理员
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>脚本控制颜色</title>
<style>
.bg{
background-color: #000;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="bg">
</div>
<button id="randomChange">随机颜色</button>
<button id="addChange">Hue色调递增</button>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
var i=0;
$("#randomChange").click(function(){
var color= '#'+Math.floor(Math.random()*255).toString(10)
$(".bg").css("background-color",color)
});
$("#addChange").click(function(){
const color = `hsla(${i}, 50%, 50%, 1`
$(".bg").css("background-color",color)
i=i+10
});
});
</script>
</body>
</html>
博客评论功能已关闭