abstrait：<!DOCTYPE html>
<html>
<head>
<title>jq點擊按鈕,顏色隨機改變,數(shù)字全部加一;</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"><
<!DOCTYPE html>
<html>
<head>
<title>jq點擊按鈕,顏色隨機改變,數(shù)字全部加一;</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
p{
width: 40px;height: 40px;
border: 1px solid #ccc;
border-radius: 50%;
line-height: 40px;
text-align: center;
float: left;
margin-left: 10px;
}
.clear{clear: both;}
</style>
</head>
<body>
<div>
<p num="1">1</p>
<p num="2">2</p>
<p num="3">3</p>
<p num="4">4</p>
</div>
<div class="clear"></div>
<button>按鈕</button>
<script type="text/javascript">
//改變每個p標簽的顏色
function color(){
// 首先遍歷p標簽;
var p=document.getElementsByTagName('p');
for (var i = 0; i<p.length; i++) {
// 產(chǎn)生一個隨機小數(shù),乘以1000000,然后在四舍五入,拼接;
var a=Math.random()*1000000;
var b=Math.round(a);
var c='#'+b;
//輸出每一個p標簽的顏色;也就是輸出了4次;
document.getElementsByTagName('p')[i].style.backgroundColor=c
}
}
//隨機數(shù)字;
function num(){
var p=document.getElementsByTagName('p');
for (var i = 0; i<p.length; i++) {
// 產(chǎn)生一個隨機小數(shù),,然后在四舍五入,拼接;
var a=Math.random()*9;
var b=Math.round(a);
// document.write(b)
document.getElementsByTagName('p')[i].innerHTML=b;
}
}
//各個數(shù)字加一
function addone(){
var p=document.getElementsByTagName('p');
for (var i = 0; i<p.length; i++) {
var n=parseInt(document.getElementsByTagName('p')[i].innerHTML)+1;
// document.write(n)
document.getElementsByTagName('p')[i].innerHTML=n;
}
}
//點擊按鈕,產(chǎn)生隨機數(shù)字和顏色;
$(document).ready(function(){
$('button').click(function(){
//隨機改變顏色
$(this).css('background',color())
//隨機改變數(shù)字
// $(this).text(num())
//每次都只加一
$(this).html(addone())
})
})
</script>
</body>
</html>
