html pc 端音乐播放器,bodong.html

频率抖动视图

*{

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

原始数据

按行查看

历史