编写一个评分控件,用一个单行5列的Table做评分控件,监听td的click事件,点击一个td的时候,将这个td及之前的td背景色变为红色,之后的td背景色变为白色。
关键代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border: 1px solid #666;margin: 200px auto;padding: 30px;}td {border: 1px solid #333;width: 20px;height: 20px;}</style>
</head><body><table><tr><td></td><td></td><td></td><td></td><td></td></tr></table><script>var tds = document.querySelectorAll('td');for (let i = 0; i < tds.length; i++) {tds[i].style.backgroundColor = '#fff';tds[i].onclick = function () {for (let j = 0; j < tds.length; j++) {if (j <= i) {tds[j].style.backgroundColor = 'red';} else {tds[j].style.backgroundColor = '#fff';}}};}</script>
</body></html>