<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0px;
margin: 0px;
}
div {
height: 30px;
width: 20%;
background-color: silver;
border: 1px solid silver;
}
#b1,
#b2 {
width: 33%;
height: 30px;
color: red;
float: left;
font-size: 28px;
text-align: center;
border: 0px;
}
span {
display: inline-block;
width: 34%;
float: left;
height: 30px;
font-size: 28px;
text-align: center;
background-color: white;
}
#p1 {
background-color: orangered;
}
#p2 {
background-color: green;
/*rgb(25, 25, 25);*/
}
#p1,
#p2 {
color: black;
font-size: 28px;
height: 50px;
}
</style>
</head>
<body>
<div id="app7">
<button id="b1" onclick="jian()">-</button>
<span id="s1">1</span>
<button id="b2" onclick="add()">+</button>
</div>
<p id="p1" style="background-color: red;">font size 文本大小</p>
<p id="p2" style="background-color: rgb(25, 25, 25);">chare color 改变颜色</p>
</body>
<script>
var a = document.getElementById('s1').innerHTML;
var na = Number(a)
function jian() {
var newcolor = 1;
if (na > 1) {
document.getElementById('s1').innerHTML = --na;
document.getElementById("p1").style.fontSize = na * 10 + "px"; //改变字体大小
newcolor = na * 25.5;
document.getElementById("p2").style.backgroundColor = "rgb(" + newcolor + "," + newcolor + "," + newcolor +
")";
//console.log("rgb(" + newcolor + "," + newcolor + "," + newcolor +")")
} else {
alert("已经最小了")
}
}
function add() {
if (na < 10) {
document.getElementById('s1').innerHTML = ++na;
document.getElementById("p1").style.fontSize = na * 10 + "px"; ///改变字体大小
newcolor = na * 25.5;
document.getElementById("p2").style.backgroundColor = "rgb(" + newcolor + "," + newcolor + "," + newcolor +
")";
//console.log("rgb(" + newcolor + "," + newcolor + "," + newcolor +")")
} else {
alert("已经最大了")
}
}
</script>
</html>
原生js计数器,可以修改字体,颜色属性
最新推荐文章于 2023-02-14 17:50:47 发布