弹幕
<!-- <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>