js实现徽章
实现徽章的方法
使用HTML和CSS创建基础徽章
通过HTML元素结合CSS样式可以快速创建徽章效果。通常使用<span>标签包裹徽章内容，并设置圆角、背景色等样式。
<span class="badge">New</span>.badge {
display: inline-block;
padding: 3px 6px;
border-radius: 12px;
background-color: #ff4757;
color: white;
font-size: 12px;
font-weight: bold;
}动态生成徽章
通过JavaScript动态创建DOM元素并添加样式类，适用于需要程序化生成徽章的场景。
function createBadge(text) {
const badge = document.createElement('span');
badge.className = 'badge';
badge.textContent = text;
return badge;
}
document.body.appendChild(createBadge('Hot'));数字徽章实现
对于需要显示数字的徽章（如未读消息数），可通过CSS控制最小宽度和内容居中。
.count-badge {
min-width: 20px;
text-align: center;
/* 其他样式与基础徽章相同 */
}角标徽章
在元素右上角显示小型徽章时，需要父元素设置position: relative，徽章使用绝对定位。
<div class="icon-container">
<span class="corner-badge">3</span>
</div>.icon-container {
position: relative;
width: 24px;
height: 24px;
}
.corner-badge {
position: absolute;
top: -5px;
right: -5px;
/* 其他徽章样式 */
}动画效果增强
添加CSS动画使徽章更醒目，例如脉冲效果。
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-badge {
animation: pulse 1.5s infinite;
}框架集成
在React等框架中，可将徽章封装为可复用组件。
function Badge({ children, variant = 'default' }) {
return <span className={`badge ${variant}`}>{children}</span>;
}SVG徽章
对于复杂形状的徽章，可以使用SVG实现更灵活的图形。
<svg class="svg-badge" viewBox="0 0 100 100">
<path d="M0,0 L100,0 L100,100 L0,100 Z"/>
<text x="50" y="50">VIP</text>
</svg>
