js 弹幕、选项菜单、弹出及消除星星

弹幕

<!-- <section></section>

<div><input type="text" name="" id="" value="1111111"><button>发送</button></div>

<script src="./myApi.js"></script>

<script>

 

var btn = document.querySelector("button");

var info = document.querySelector("input");

var infoShow = document.querySelector("section");

btn.onclick = function () {

var txt = info.value;

 

var createP = document.createElement("p");

infoShow.appendChild(createP);

createP.innerHTML = txt;

var speed = 10;

 

createP.style.top = randomNum(0, 300) + "px";

setInterval(function () {

createP.style.left = createP.offsetLeft - speed + "px";

}, 50)

info.value = "";

}

</script>

 

弹出及消除星星

<script src="../myApi.js"></script>

<script>

var

vw = document.documentElement.clientWidth - 38,

vh = document.documentElement.clientHeight - 39;

setInterval(function(){

var createImg = document.createElement('img');

createImg.src = './img/star.gif';

createImg.style.position = 'absolute';

createImg.style.left = randomNum(0,vw) + 'px';

createImg.style.top = randomNum(0,vh) + 'px';

createImg.onclick = function(){

this.remove();

}

//添加再 body里面

document.body.appendChild(createImg);

},500)

 

选项菜单

<div>

<span class="active">TAB 1</span>

<span>TAB 2</span>

<span>TAB 3</span>

</div>

<section>

<article class="show">content 1</article>

<article>content 2</article>

<article>content 3</article>

</section>

<script>

var

aBtn = document.querySelectorAll('div span'),

aCon = document.querySelectorAll('section article');

//按钮（点击更改样式）

for(var i = 0 ; i < aBtn.length ; i++){

//记录每个按钮的下标

aBtn[i].index = i;

aBtn[i].onclick = function(){

//调用清空类名的方法（先清空 然后再给当前节点添加类名）

clearClass();

//点击添加类名

this.className = 'active';

//用按钮的下标座位内容快的下标

aCon[this.index].className = 'show';

}

}

//封装清空类名的方法

function clearClass(){

for(var k = 0 ; k < aBtn.length ; k++){

aBtn[k].className = '';

aCon[k].className = '';

}

}

 

</script>

转载于:https://www.cnblogs.com/wenlx/p/11482444.html