根据不同状态字设置文字颜色

最新推荐文章于 2024-06-02 15:45:53 发布

shit_fcl

最新推荐文章于 2024-06-02 15:45:53 发布

阅读量164

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/m0_71371266/article/details/130393307

版权

这个功能是为了标明不同的状态，使用不同的颜色来表明，例如在一个活动中，报名中的状态就使用绿色将字体来渲染。以下是具体实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.6.4.js"></script>
		<script>
			$(function(){
				$("span").each(function(){
					var state=$(this).text()
					//alert(state)
					//alert(txt)
					switch(state){
						case "报名中" : $("#s1").css("color","green");
						break;
						case "已截止" : $("#s2").css("color","blue");
						break;
						case "已结束" : $("#s3").css("color","red");
						break;
						case "未开始" : $("#s4").css("color","black");
						break;
						}
				})
			})
		</script>
	</head>
	<body>
		<span id="s1">报名中</span><br>
		<span id="s2">已结束</span><br>
		<span id="s3">已截止</span><br>
		<span id="s4">未开始</span><br>
	</body>
</html>

以下是实现的效果

当然要动态显示的话，对于只有ssm框架或者web基础的学者来说，可以暴力一点，直接拼接字符串在一个div里面，具体实现可以去了解一下

其实实现也不难，主要是记录以下自己做大创的每一个功能的实现方法，对于初学者来说，从0到1的过程，蛮有成就感的

shit_fcl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据不同状态字设置文字颜色

当然要动态显示的话，对于只有ssm框架或者web基础的学者来说，可以暴力一点，直接拼接字符串在一个div里面，具体实现可以去了解一下。这个功能是为了标明不同的状态，使用不同的颜色来表明，例如在一个活动中，报名中的状态就使用绿色将字体来渲染。其实实现也不难，主要是记录以下自己做大创的每一个功能的实现方法，对于初学者来说，从0到1的过程，蛮有成就感的。
复制链接

扫一扫