*{
margin:0px;
padding:0px;
}
.box{
position:relative;
top:200px;
left:200px;
width: 800px;
height:100px;
background: rgb(198, 228, 233);
}
.rate{
position:absolute;
bottom:0px;
left:0px;
width:3px;
/* height:100px; */
background: rgb(11, 170, 233);
float:left;
margin-left:10px;
border-top-left-radius:2px 100px;
border-top-right-radius:2px 100px;
}
var box=document.getElementsByClassName("box")[0];
var boxWidth=box.offsetWidth;
var boxHeight=box.offsetHeight;
var randomH=Math.floor(Math.random()*boxHeight);
function creatp(num){
for(var i=0;i
var crep=document.createElement("p");
var randomW=Math.floor(Math.random()*boxWidth);
var randomH=Math.floor(Math.random()*boxHeight);
crep.className="rate"
crep.style.left=randomW+"px";
crep.style.height=randomH+"px";
box.appendChild(crep);
}
box.removeChild(crep);
}
setInterval(function(randomNum){
var randomNum=Math.floor(Math.random()*100+50);
box.innerHTML="";
creatp(randomNum);
},1000);
// $(function(){
// var box=$(".box");
// })
这是文中一段话
//点击按钮,动态创建元素
//方法一:$()创建元素,后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中。
$('#btn').click(function() {
var el = $('
这是一个P标签
');// $('#box').append(el); //两种添加方法
el.appendTo($('#box'));
})
//方法二:.html()方法为元素 创建并添加子元素。 html() 还可以把其他地方元素添加进这个对象中。支持添加标签。
$('#btn').click(function() {
$('#box').html('标题是。。');
})
// //如DOM中创建元素方法
// var box = document.getElementById('box');
// var p = document.createElement('p');
// p.innerText = '这是第二个哦~';
// box.appendChild(p);
// //jQuery中添加元素的方法:
// var i = 1;
// $('#btn').click(function () {
// var p = $('
第二个p标签' + i + '
')// i++;
// //一、在元素内添加,可以把其他地方元素也添加进来:对象.html('元素及内容')
// $('#box').html($('#main'));
// //二、在元素内添加,依次(往后)添加:对象.append(元素) 或者 元素.appendTo(对象)
// $('#box').append($('#main'));
// $('#box').append(p);
// //三、在元素内添加,依次(往前)添加:对象.prepend(元素);
// $('#box').prepend(p);
// //四、在元素前添加兄弟元素,依次(往后)添加:对象.before(元素);
// $('#box').before(p);
// //五,在元素后添加兄弟元素,依次(往前)添加:对象.after(元素);
// $('#box').after(p);
// })
一键复制
编辑
Web IDE
原始数据
按行查看
历史