一、使用js给予元素相应的样式
<!DOCTYPE html>
<html>
<head>
<title>使用js给予元素相应的样式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
#container{
}
#outNode{
height: 200px;
line-height: 200px;
width:calc(50% - 2px);
border:1px dashed grey;
text-align: center;
float: left;
}
#outNode #box{
width: 100px;
height: 100px;
border:1px solid black;
margin: 0 auto;
margin-top:50px;
}
#outNode #ipt{
height: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="outNode">
<div id="box"></div>
</div>
<div id="outNode">
<input type="button" name="" value="改变" id="ipt">
</div>
<div id="outNode">
<div id="box"></div>
</div>
<div id="outNode">
<input type="button" name="" value="改变" id="ipt">
</div>
<div id="outNode">
<div id="box"></div>
</div>
<div id="outNode">
<input type="button" name="" value="改变" id="ipt">
</div>
<div id="outNode">
<div id="box"></div>
</div>
<div id="outNode">
<input type="button" name="" value="改变" id="ipt">
</div>
</div>
</body>
<script type="text/javascript">
var container=document.getElementById('container');
container.children[1].children[0].onclick=function(){
container.children[0].children[0].style.background='red';
}
container.children[3].children[0].onclick=function(){
container.children[2].children[0].style.cssText='background:green;width:350px;';
}
container.children[5].children[0].onclick=function(){
container.children[4].children[0].style.cssText='background:yellow;width:350px;height:150px;margin-top:25px;';
}
container.children[7].children[0].onclick=function(){
container.children[6].children[0].style.cssText='background:pink;width:10%;height:10%;margin-left:0;margin-top:0;position:relative;top:45%;';
}
</script>
</html>
二、JS广告弹窗
<!DOCTYPE html>
<html>
<head>
<title>JS广告弹窗</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
#container{
position: relative;
height: 100%;
width: 100%;
}
#container input{
margin: 30px;
}
#container a{
position: absolute;
}
.join{
top: 10%;
right: 0;
border:1px solid grey;
}
#join{
height: 148px;
padding: 10px;
}
.invite{
left: 0;
bottom: 0;
border:1px solid grey;
}
#invite{
width: 198px;
padding: 10px;
}
.iwu{
right: 0;
bottom: 0;
}
#iwu{
width: 200px;
}
.closed{
position: absolute;
height: 25px;
width: 25px;
top: 0;
right: 0;
}
.show{
display: none;
background: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<input type="button" name="" value="打开所有广告" id="open">
<input type="button" name="" value="关闭所有广告" id="close">
<a href="#" class="join">
<img src="./imgs/join.png" id="join">
<img src="./imgs/closed.png" class="closed">
</a>
<a href="#" class="invite">
<img src="./imgs/invi.png" id="invite">
<img src="./imgs/closed.png" class="closed">
</a>
<a href="#" class="iwu">
<img src="./imgs/u.png" id="iwu">
<img src="./imgs/closed.png" class="closed show" id="show">
</a>
</div>
</body>
<script type="text/javascript">
var close=document.getElementsByClassName('closed'),
allClose=document.getElementById('close'),
allOpen=document.getElementById('open'),
allA=document.getElementsByTagName('a'),
iwu=document.getElementsByClassName('iwu')[0],
show=document.getElementById('show');
for (var i=0;i<close.length;i++) {
close[i].onclick=function(){
this.parentNode.style.display='none';
event.cancelBubble=true;
}
}
iwu.onclick=function(){
window.location.href='https://study.163.com/course/courseLearn.htm?courseId=1210295943#/learn/video?lessonId=1281640180&courseId=1210295943';
}
iwu.onmouseover=function(){
this.children[1].style.display='block';
}
iwu.onmouseout=function(){
this.children[1].style.display='none';
}
show.onmouseover=function(){
this.setAttribute('src','./imgs/closed2.png');
}
show.onmouseout=function(){
this.setAttribute('src','./imgs/closed.png');
}
allClose.onclick=function(){
for (var i=0;i<allA.length;i++) {
allA[i].style.display='none';
}
}
allOpen.onclick=function(){
for (var i=0;i<allA.length;i++) {
allA[i].style.display='block';
}
}
</script>
</html>
三、旋转V字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转V字</title>
<style>
*{
margin: 0;
padding: 0;
}
#rightNode{
float: right;
}
#rightNode input,span{
float: left;
margin:20px;
}
#leftNode{
position: relative;
display: none;
}
.oSpan{
position: absolute;
height: 50px;
width: 50px;
background: red;
margin:0;
font-size: 28px;
color: #ffffff;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="leftNode">
<span class="oSpan">0</span>
<span class="oSpan">1</span>
<span class="oSpan">2</span>
<span class="oSpan">3</span>
<span class="oSpan">4</span>
</div>
<div id="rightNode">
<input type="color" id="colorBtn">
<span id="content">您目前没有选中元素</span>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script>
var btn=document.getElementById('btn'),
leftNode=document.getElementById('leftNode'),
oSpan=document.getElementsByClassName('oSpan'),
content=document.getElementById('content'),
colorBtn=document.getElementById('colorBtn'),
num=0;
window.onload=function(){
colorBtn.value='#ff0000';
}
btn.onclick=function(){
colorBtn.value='#ff0000';
leftNode.style.display='block';
content.innerHTML='您目前没有选中元素';
if (num%4==0) {
oSpan[0].style.cssText='top:100px;left:0px;';
oSpan[1].style.cssText='top:50px;left:50px;';
oSpan[2].style.cssText='top:0px;left:100px;';
oSpan[3].style.cssText='top:50px;left:150px;';
oSpan[4].style.cssText='top:100px;left:200px;';
}
else if(num%4==1){
oSpan[0].style.cssText='top:0px;left:0px;';
oSpan[1].style.cssText='top:50px;left:50px;';
oSpan[2].style.cssText='top:100px;left:100px;';
oSpan[3].style.cssText='top:150px;left:50px;';
oSpan[4].style.cssText='top:200px;left:0px;';
}
else if(num%4==2){
oSpan[0].style.cssText='top:0px;left:0px;';
oSpan[1].style.cssText='top:50px;left:50px;';
oSpan[2].style.cssText='top:100px;left:100px;';
oSpan[3].style.cssText='top:50px;left:150px;';
oSpan[4].style.cssText='top:0px;left:200px;';
}
else if(num%4==3){
oSpan[0].style.cssText='top:0px;left:100px;';
oSpan[1].style.cssText='top:50px;left:50px;';
oSpan[2].style.cssText='top:100px;left:0px;';
oSpan[3].style.cssText='top:150px;left:50px;';
oSpan[4].style.cssText='top:200px;left:100px;';
}
num++;
}
for (var i=0;i<oSpan.length;i++) {
oSpan[i].setAttribute('index',i);
oSpan[i].onclick=function(){
content.innerHTML='您选中是'+this.getAttribute('index')+'号元素';
this.classList.add('checked');
}
colorBtn.onchange = function(){
for (var i=0;i<oSpan.length;i++){
if(oSpan[i].classList.contains('checked')){
oSpan[i].style.background=this.value;
oSpan[i].classList.remove('checked');
}
}
}
}
</script>
</html>
进阶版：
<!DOCTYPE html>
<html>
<head>
<title>旋转v字详解</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
input,span{
float: right;
margin:20px;
}
#leo{
position: relative;
display: none;
}
#leo>div{
position: absolute;
height: 50px;
width: 50px;
background: red;
font-size: 28px;
color: #ffffff;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="leo"></div>
<input type="button" name="" value="按钮" id="btn">
<span id="span">您目前没有选中元素</span>
<input type="color" name="" value="#ff0000" id="color">
<script type="text/javascript">
for (var i = 0; i < 5; i++) {
var oDiv=document.createElement('div');
oDiv.innerHTML=i;
leo.appendChild(oDiv);
}
var allDiv=leo.children;
var num = 0;
var needDOM='';
for(var i=0;i<allDiv.length;i++){
allDiv[i].index=i;
allDiv[i].onclick=function(){
needDOM=this;
span.innerHTML='您选中的是'+this.index+'号元素';
}
}
color.oninput=function(){
if (needDOM=='') {
alert('您还没有选择到元素');
return;
}
needDOM.style.background=this.value;
}
btn.onclick=function(){
leo.style.display='block';
span.innerHTML='您没有选中元素';
color.value='#ff0000';
needDOM='';
switch(num){
case 0:
for(var i = 0; i < allDiv.length; i++){
console.log(allDiv[i].style);
allDiv[i].removeAttribute('style');
allDiv[i].style.left=50*i+'px';
if (i % 4 == 0) {
allDiv[i].style.top='100px';
}
if (i % 2 == 1) {
allDiv[i].style.top='50px';
}
if(i == 2){
allDiv[i].style.top='0px';
}
};
num++;
break;
case 1:
for(var i = 0; i < allDiv.length; i++){
allDiv[i].removeAttribute('style');
allDiv[i].style.top=50*i+'px';
if (i % 4 == 0) {
allDiv[i].style.left='0px';
}
if (i % 2 == 1) {
allDiv[i].style.left='50px';
}
if (i == 2) {
allDiv[i].style.left='100px';
}
};
num++;
break;
case 2:
for(var i = 0; i < allDiv.length; i++){
allDiv[i].removeAttribute('style');
allDiv[i].style.left=50*i+'px';
if (i % 4 == 0) {
allDiv[i].style.top='0px';
}
if (i % 2 == 1) {
allDiv[i].style.top='50px';
}
if(i == 2){
allDiv[i].style.top='100px';
}
};
num++;
break;
case 3:
for(var i = 0; i < allDiv.length; i++){
allDiv[i].removeAttribute('style');
allDiv[i].style.top=50*i+'px';
if (i % 4 == 0) {
allDiv[i].style.left='100px';
}
if (i % 2 == 1) {
allDiv[i].style.left='50px';
}
if (i == 2) {
allDiv[i].style.left='0px';
}
};
num=0;
break;
}
}
</script>
</body>
</html>
四、元素搬运工
<!DOCTYPE html>
<html>
<head>
<title>元素搬运工</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
#box{
float: left;
height: 200px;
width: calc(50% - 2px);
border:1px dashed gray;
}
input{
margin:10px 0 0 10px;
float: left;
}
#outNode{
display: flex;
justify-content: center;
height: 110px;
width: 100%;
margin-top: 44px;
}
.block{
width: 100px;
height: 100px;
border: 5px solid gray;
margin: 0 5px;
}
.active{
border: 5px solid black;
}
#blue{
background-color: blue;
}
#yellow{
background-color: yellow;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#pink{
background-color: pink;
}
#orange{
background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<input type="button" name="" value="挪入">
<div id="outNode">
<div class="block blue" id="blue"></div>
<div class="block yellow" id="yellow"></div>
<div class="block red" id="red"></div>
</div>
</div>
<div id="box">
<input type="button" name="" value="挪入">
<div id="outNode">
<div class="block blue" id="blue"></div>
<div class="block yellow" id="yellow"></div>
<div class="block green" id="green"></div>
</div>
</div>
<div id="box">
<input type="button" name="" value="挪入">
<div id="outNode">
<div class="block pink" id="pink"></div>
<div class="block orange" id="orange"></div>
</div>
</div>
<div id="box">
<input type="button" name="" value="挪入">
<div id="outNode">
</div>
</div>
</body>
<script type="text/javascript">
var allBlock=document.getElementsByClassName('block'),
allActive=document.getElementsByClassName('active'),
btn=document.getElementsByTagName('input');
for(var i=0;i<allBlock.length;i++){
allBlock[i].onclick=function(){
if(this.classList.contains('active')){
this.classList.remove('active');
}
else{
for (var j=0;j<allBlock.length;j++) {
allBlock[j].classList.remove('active');
}
this.classList.add('active');
}
}
}
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
if(allActive[0]==null){
alert('没有选择到元素！');
}
else if(allActive[0].parentNode.parentNode==this.parentNode){
alert('不能自己移入自己里面！');
}
else if(this.parentNode.children[1].children.length>=5){
alert('最多只能放入5个不同的盒子！');
}
else if(this.parentNode.children[1].getElementsByClassName('block '+allActive[0].id).length>0){
alert('有重复元素！不能移入');
}
else{
this.parentNode.children[1].appendChild(allActive[0]);
allActive[0].classList.remove('active');
}
}
}
</script>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素搬运工</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
width: 100%;
height: 200px;
border-bottom:1px dashed #ccc;
}
ul li>div{
height: 155px;
width: 50%;
float: left;
position: relative;
text-align: center;
padding-top: 40px;
}
ul li>div.left .line{
height: 100%;
position: absolute;
right: 0;
top: 0;
border-right: 1px dashed #ccc;
}
ul li>div input{
position: absolute;
left: 10px;
top: 10px;
}
ul li>div>div{
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid #ccc;
cursor: pointer;
}
ul li>div>div.blue{
background: blue;
}
ul li>div>div.yellow{
background: yellow;
}
ul li>div>div.red{
background: red;
}
ul li>div>div.green{
background: green;
}
ul li>div>div.pink{
background: pink;
}
ul li>div>div.orange{
background: orange;
}
ul li>div>div.choose{
border-color: black;
}
</style>
</head>
<body>
<ul>
<li>
<div class="left">
<input type="button" name="" value="挪入">
<span class="line"></span>
<div class="needDiv blue"></div>
<div class="needDiv yellow"></div>
<div class="needDiv red"></div>
</div>
<div class="right">
<input type="button" name="" value="挪入">
<div class="needDiv blue"></div>
<div class="needDiv yellow"></div>
<div class="needDiv green"></div>
</div>
</li>
<li>
<div class="left">
<input type="button" name="" value="挪入">
<span class="line"></span>
<div class="needDiv pink"></div>
<div class="needDiv orange"></div>
</div>
<div class="right">
<input type="button" name="" value="挪入">
</div>
</li>
</ul>
</body>
<script>
var allDiv=document.getElementsByClassName('needDiv');
var allInput=document.getElementsByTagName('input');
var needDom='',
needIndex='';
for (var i = 0; i<allDiv.length; i++) {
allDiv[i].index=i;
allDiv[i].setAttribute('className',allDiv[i].className);
allDiv[i].onclick=function(){
for(var j = 0; j<allDiv.length; j++){
if (j==this.index) {
continue;
}
allDiv[j].className=allDiv[j].getAttribute('className');
allDiv[j].removeAttribute('active');
}
if(this.hasAttribute('active')){
this.className=this.getAttribute('className');
this.removeAttribute('active');
needDom='';
needIndex='';
}
else{
needDom=this;
needIndex=this.parentNode.children[0].inx;
this.className +=' choose';
this.setAttribute('active','');
}
}
}
for(var i=0;i<allInput.length;i++){
allInput[i].inx=i;
allInput[i].onclick=function(){
if (needDom==''){
alert('没有选择到元素！');
}
else{
var bDiv=this.parentNode.getElementsByTagName('div');
var Bloon=false;
for (var i = 0;i < bDiv.length;i++) {
if (bDiv[i].getAttribute('className')==needDom.getAttribute('className')) {
Bloon=true;
break;
}
}
if (needIndex==this.inx) {
alert('不能自己移入自己里面！');
return;
}
if (Bloon) {
alert('有重复元素！不能移入');
return;
}
if (bDiv.length==5) {
alert('最多只能放入5个不同的盒子！');
return;
}
this.parentNode.appendChild(needDom);
for(var j = 0; j<allDiv.length; j++){
allDiv[j].index=j;
allDiv[j].className=allDiv[j].getAttribute('className');
allDiv[j].removeAttribute('active');
}
}
}
}
</script>
</html>
五、按钮控制商品图片上下滚动
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>按钮控制商品图片上下滚动</title>
<style>
html, body, p, h2, h3, ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
h2 {
width: 170px;
background: #294A73;
color: #FFFFFF;
font-size: 14px;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 20px auto 0 auto;
}
h2 a {
float: right;
}
#container {
width: 160px;
height: 450px;
background: #fff;
overflow: hidden;
padding: 20px 10px;
margin: 0 auto;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
position: relative;
}
#container h3 {
font-size: 14px;
line-height: 28px;
}
#container ul{
position: relative;
top: 0;
}
#container li {
border-bottom: 1px solid #A4A4A4;
position: relative;
padding-bottom: 5px;
}
#container img {
max-width: 80px;
max-height: 60px;
position: absolute;
top: 5px;
right: 5px;
}
#container p {
font-size: 12px;
width: 80px;
}
#container .time {
padding-top: 10px;
color: gray;
}
#up, #down {
width: 100%;
height: 20px;
position: absolute;
left: 0;
cursor: pointer;
z-index: 1;
}
#up {
top: 0;
background: url('imgs/arrowUp.png') no-repeat center center #EFEFE7;
}
#down {
bottom: 0;
background: url('imgs/arrowDown.png') no-repeat center center #EFEFE7;
}
</style>
</head>
<body style="">
<h2>李游Leo<a href="#">>>更多</a></h2>
<div id="container">
<div id="up" style="background-color: rgb(239, 239, 231);"></div>
<ul style="top: 0px;">
<li>
<h3>标题一</h3>
<p>Mac翻新产品<br>iPod翻新产品</p>
<p class="time">12:35</p>
<img src="./imgs/ad1.png" alt="">
</li>
<li>
<h3>标题二</h3>
<p>RMB5,780起<br>最低降了30%</p>
<p class="time">21:29</p>
<img src="./imgs/ad2.png" alt="">
</li>
<li>
<h3>标题三</h3>
<p>Mac完全解析</p>
<p class="time">22:38</p>
<img src="./imgs/ad3.png" alt="">
</li>
<li>
<h3>标题四</h3>
<p>无线网络基础</p>
<p class="time">12:00</p>
<img src="./imgs/ad4.png" alt="">
</li>
<li>
<h3>标题五</h3>
<p>从PC到Mac：<br>基础知识</p>
<p class="time">23:12</p>
<img src="./imgs/ad5.png" alt="">
</li>
<li>
<h3>标题六</h3>
<p>转移到Mac</p>
<p class="time">15:30</p>
<img src="./imgs/ad6.png" alt="">
</li>
<li>
<h3>标题七</h3>
<p>各种Mac机</p>
<p class="time">3:23</p>
<img src="./imgs/ad7.png" alt="">
</li>
<li>
<h3>标题八</h3>
<p>RMB348起<br>最多降低了43%</p>
<p class="time">15:48</p>
<img src="./imgs/ad8.png" alt="">
</li>
</ul>
<div id="down" style="background-color: rgb(239, 239, 231);"></div>
</div>
</body>
<script type="text/javascript">
var ul=document.getElementsByTagName('ul'),
container=document.getElementById('container'),
up=document.getElementById('up'),
down=document.getElementById('down')
scrollHeight=ul[0].offsetHeight-(container.offsetHeight-up.offsetHeight-down.offsetHeight);
var l=0;
up.onmousedown=function(){
var scrollup=setInterval(function(){
if (l==-scrollHeight){
}else{
l+=-1;
}
ul[0].style.top=l+'px';
},0)
up.onmouseup=function(){
clearInterval(scrollup);
}
}
down.onmousedown=function(){
var scrolldown=setInterval(function(){
if (l==0){
}else{
l+=1;
}
ul[0].style.top=l+'px';
},0)
down.onmouseup=function(){
clearInterval(scrolldown);
}
}
up.onmouseover=function(){
up.style.backgroundColor='#e5eeee';
}
up.onmouseout=function(){
up.style.backgroundColor='#EFEFE7';
}
down.onmouseover=function(){
down.style.backgroundColor='#e5eeee';
}
down.onmouseout=function(){
down.style.backgroundColor='#EFEFE7';
}
</script>
</html>
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
