我的問題是這樣的：創建3個橢圓，用紅、綠、藍填充，使用正確的API在圓中顯示一個名稱，但是不使用圖片。在每個圓圈內，顯示它被點擊的次數。比如，如果我點擊綠色圓圈3次，它應該在中心顯示“3”。每個圓圈應該跟蹤自己的點擊。同時有一個按鈕來清除每個圓的點擊次數。
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.color>div{
height: 300px;
width: 300px;
border-radius: 50%;
display: inline-block;
line-height: 300px;
text-align: center;
font-size: 60px;
cursor: pointer;
}
.color>div:nth-of-type(1){background-color:red }
.color>div:nth-of-type(2){background-color:green }
.color>div:nth-of-type(3){background-color:blue}
</style>
</head>
<body>
<div class="color">
<div id="red">0</div>
<div id="green">0</div>
<div id="blue">0</div>
</div>
</body>
<script type="text/javascript">
window.onload=function () {
var color=[0,0,0];
var colorlist=document.getElementsByClassName("color")[0].children;
for (let id in colorlist) {
colorlist[id].id=id;
colorlist[id].onmousedown=function (e) {
this.innerHTML= e.button ===0?++color[this.id]:--color[this.id];//滑鼠左鍵加右鍵減
}
}
}
</script>
</html>
uj5u.com熱心網友回復：
您的代碼不能用。uj5u.com熱心網友回復：
怎么不可以用？？？uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.color>div{
height: 300px;
width: 300px;
border-radius: 50%;
display: inline-block;
line-height: 300px;
text-align: center;
font-size: 60px;
cursor: pointer;
}
.color>div:nth-of-type(1){background-color:red }
.color>div:nth-of-type(2){background-color:green }
.color>div:nth-of-type(3){background-color:blue}
.btn{
}
</style>
</head>
<body>
<div class="color">
<div id="red">0</div>
<div id="green">0</div>
<div id="blue">0</div>
</div>
<div class="btn">
<button type="button">清除red</button>
<button type="button">清除green</button>
<button type="button">清除blue</button>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var color = [0, 0, 0];
var colorlist = document.getElementsByClassName("color")[0].children;
var btnlist = document.getElementsByClassName("btn")[0].children;
for (let id in colorlist) {
colorlist[id].id = id;
btnlist[id].id = "btn" + id;
colorlist[id].onmousedown = function(e) {
this.innerHTML = e.button === 0 ? ++color[this.id] : --color[this.id]; //滑鼠左鍵加右鍵減
}
btnlist[id].onmousedown = function(e) {
color[id] = 0
document.getElementById(id).innerHTML = 0
}
}
}
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/48743.html
標籤：JavaScript
上一篇：C#一張表多級分類查詢
下一篇：element級聯選擇器