<div class="meter">
<span style="width: 25%"></span>
</div>
.meter {
height: 20px /* Can be anything */
position: relative
background: #555
-moz-border-radius: 25px
-webkit-border-radius: 25px
border-radius: 25px
padding: 10px
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)
}
.meter >span {
display: block
height: 100%
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
background-color: rgb(43,194,83)
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
)
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4)
position: relative
overflow: hidden
}
.orange >span {
background-color: #f1a165
background-image: linear-gradient(to bottom, #f1a165, #f36d0a)
}
.red >span {
background-color: #f0a3a3
background-image: linear-gradient(to bottom, #f0a3a3, #f42323)
}
.meter >span:after {
content: ""
position: absolute
top: 0left: 0bottom: 0right: 0
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
)
z-index: 1
background-size: 50px 50px
animation: move 2s linear infinite
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
overflow: hidden
}
<div class="div" id="0" style="position: fixedz-index: 2147483646left: 0pxwidth: 100%text-align: centerbottom: -5px background:red"></div>
//上面的样式,修改了一下,加了一个class和设置了一个背景图。
<script type="text/javascript">
var div = document.getElementsByClassName('div')[0]
//在它的后面加上''转换成字符串
var oid = oRandom(1,99999) + ''
//设置新的id值
div.setAttribute('id',oid)
//设置样式
div.style.height = '100px'
//用下面的函数,产生一个n-m的随机整数
function oRandom(n,m){
var c=m-n+1
return Math.floor(Math.random()*c+n)
}
</script>
//我不知道你有什么用,但是无论id值怎么变,div的高度都是恒定的。
给你个思路:${functon(){$("*").hover(function(){
function () {
$(this).addClass("你css的class名称")
},
function () {
$(this).removeClass("你css的class名称")
}
})
}}
但是首先你要定义一个给对象添加圆圈背景的css,然后响应的改下值就行了