【原创】百度知道等级形象！

最新推荐文章于 2025-08-12 14:56:01 发布

最新推荐文章于 2025-08-12 14:56:01 发布 · 102 阅读

文章标签：

#百度 #JavaScript #HTML #ViewUI

本文介绍了一个用于生成百度知道不同等级和形象类别的图标表格的JavaScript代码。该代码通过循环构建HTML表格，并根据不同的形象类别、性别及等级加载相应的图标。

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

常用百度知道，写了个js，代码如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=GBK">
		<title>百度知道等级图标</title>
	</head>
	<script type="text/javascript">
		var zhidaoClass =new Array ("公司白领","魔法师","科举夺魁","武将","江湖奇侠");
		function showImgByClass(){
			var content = "";
			content += "<table>";
			// 形象类别
			for(var r=0;r<5;r++){
				content += "<td>"+zhidaoClass[r]+"</td>";
				// 性别
				for(var s=1;s<3;s++){
					content += "<tr>";
					// 角色等级
					for(var g=1;g<19;g++){
						content += "<td>";
						content += "<img src='http://img.baidu.com/img/iknow/images/r"+r+"s"+s+"g"+g+".gif' />";
						content += "</td>";
					}
					content += "</tr>";
				}				
			}
			content += "</table>";
			document.getElementById("imgContent").innerHTML=content;
		}
		function showImgByGrade(){
			var content = "";
			content += "<table>";
			content += "<tr><th></th>";
			for(var h=0;h<5;h++){
				content += "<th>"+zhidaoClass[h]+"</th>";
			}
			content += "</tr>";
			// 角色等级
			for(var g=1;g<19;g++){				
				// 性别
				for(var s=1;s<3;s++){
					content += "<tr>";
					content += "<td>"+(s==1?"男":"女")+"</td>";
					// 形象类别
					for(var r=0;r<5;r++){
						content += "<td>";
						content += "<img src='http://img.baidu.com/img/iknow/images/r"+r+"s"+s+"g"+g+".gif' />";
						content += "</td>";
					}
					content += "</tr>";
				}				
			}
			content += "</table>";
			document.getElementById("imgContent").innerHTML=content;
		}
	</script>
	<body>
		<h1>百度知道各阶段形象表</h1>
		<button onclick="showImgByGrade();">按等级排列</button>
		<button onclick="showImgByClass();">按形象排列</button>
		<hr/>
		<div id="imgContent"></div>
	</body>
</html>