js实现徽章
实现徽章的方法
使用HTML和CSS创建徽章的基础结构，JavaScript用于动态更新徽章内容或样式。
<div class="badge" id="badge">5</div>.badge {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
color: white;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 12px;
}// 更新徽章内容
document.getElementById('badge').textContent = '10';动态创建徽章
通过JavaScript动态创建徽章元素并添加到DOM中。
const badge = document.createElement('div');
badge.className = 'badge';
badge.textContent = 'New';
document.body.appendChild(badge);通知徽章实现
在导航菜单或图标上添加通知数量的徽章。
<button id="notifications">
Notifications
<span class="badge">3</span>
</button>// 更新通知数量
const updateBadge = count => {
document.querySelector('#notifications .badge').textContent = count;
};
updateBadge(5);SVG徽章实现
使用SVG创建更复杂的徽章图形。
<svg width="24" height="24" id="svg-badge">
<circle cx="12" cy="12" r="10" fill="red"/>
<text x="12" y="16" text-anchor="middle" fill="white" font-size="12">8</text>
</svg>// 更新SVG徽章
document.querySelector('#svg-badge text').textContent = '12';动画徽章效果
为徽章添加CSS动画效果吸引注意力。
.badge-pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}// 添加动画类
document.getElementById('badge').classList.add('badge-pulse');
