dom

最新推荐文章于 2022-06-14 17:09:32 发布

柳LL

最新推荐文章于 2022-06-14 17:09:32 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/yllmyl/article/details/80528007

版权

//表格隔行变色

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<style>
table{
width: 800px;
height: 600px;
border:1px solid black;
border-collapse: collapse;
}
td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
//隔行变色下标如果是奇数 i=0 i<trs.length
//下标如果是偶数 i=0;i<trs.length-1
// var trs = document.getElementsByTagName('tr');
// for (var i =1;i<trs.length;i+=2){
// trs[i].style.background = 'red';
// }
// 棋盘形式
// var tds = document.getElementsByTagName('td');
// for(var i = 0;i<tds.length;i+=2){
// tds[i].style.background ='blue';
// }
//隔列变色
// var trs = document.getElementsByTagName('tr');
// for(var i=0; i<trs.length;i++){
// var tds = trs[i].getElementsByTagName('td');
// for (var j=0;j<tds.length;j+=2){
// tds[j].style.background = 'red';
// }
// }
//棋盘
var trs = document.getElementsByTagName('tr');
for(var i= 0; i < trs.length; i+=2){
var tds = trs[i].getElementsByTagName('td');
for(var j= 0; j< tds.length; j+=2){
tds[j].style.background = 'red';
}
}
for(var i = 1; i < trs.length; i+=2){
var tds = trs[i].getElementsByTagName('td');
for(var j= 1; j < tds.length; j+=2){
tds[j].style.background ='red';
}
}

// var trs = document.getElementsByTagName('tr');

// for(var i = 0; i < trs.length; i+=2){
// var tds = trs[i].getElementsByTagName('td');
// // console.log(tds);
// for(var j = 0; j < tds.length; j+=2){
// tds[j].style.background = 'red';
// }
// }

// for(var i = 1; i < trs.length; i+=2){
// var tds = trs[i].getElementsByTagName('td');
// // console.log(tds);
// for(var j = 1; j < tds.length; j+=2){
// tds[j].style.background = 'red';
// }
// }

</script>
</body>

</html>

//对应模型

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
	width: 600px;
	height: 100px;
	border:1px solid gray;
	}

	p{
	width: 60px;
	height: 60px;
	background: skyblue;
	margin: 20px;
	float: left;
	}
	</style>
	</head>
	<body>
	<div>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	</div>
	<div>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	</div>

	<script>
	// 获取元素
	var ps0 = document.getElementsByTagName('div')[0].getElementsByTagName('p');
	var ps1 = document.getElementsByTagName('div')[1].getElementsByTagName('p');

	// 批量监听
	for(var i = 0;i < ps0.length;i++){
	// 绑定自定义属性
	ps0[i].idx = i;

	ps0[i].onclick = function(){
	ps1[this.idx].style.background = 'red';
	}

//批量监听和排他

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>
div{
width: 100px;
height: 100px;
background: skyblue;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
//批量监听
var divs = document.getElementsByTagName('div');

for(var i = 0; i < divs.length; i++){
// 给每个div绑定自定义属性
divs[i].idx = i;

divs[i].onclick = function(){
console.log(this.idx);

divs[this.idx].style.background = 'red';
}
}
//排他
var divs = document.getElementsByTagName('div');
for(var i =0; i<divs.length;i++){
//divs[i].onclick =function(){}
divs[i].onmouseover =function(){
for (var j = 0; j<divs.length; j++){
divs[j].style.background ='skyblue';
}
this.style.background ="red";
}
}
//IIFE及时调用函数表达式
// for(var i = 0; i < divs.length; i++){
// (function(m){
// divs[m].onclick = function(){
// console.log(m);

// divs[m].style.background = 'red';
// }
// })(i);
// }
</script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>

<script>
window.onload = function(){
var box = document.getElementById('box');
box.onclick =function(){
console.log('onclick');
}
}
</script>
</head>
<body>
<input type="text" id='ipt'>
<div id = 'box'>box</div>

<script>
var input = document.getElementById('ipt');
input.onfocus = function(){
console.log('onfocus');
}
input.onblur = function(){
console.log('onblur');
}
// var right=document.getElementById('right');
// var left=document.getElementById('left');
// var topbtn=document.getElementById('top');
// var buttom=document.getElementById('buttom');
// var hu=document.getElementById('hu');
// //信号量
// var nowleft=100;
// var nowtop=100;

// left.onclick = function(){
// nowleft +=10;
// hu.style.left =nowleft+'px';
// }
// right.onclick = function(){
// nowleft -=10;
// hu.style.left =nowleft+'px';
// }
// topbtn.onclick = function(){
// nowtop-=10;
// hu.style.top =nowtop+'px';
// }
// buttom.onclick = function(){
// nowtop +=10;
// hu.style.top =nowtop+'px';
// }

</script>
</body>
</html>

//调色板

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>调色板</title>

</head>
<body id='r'>
<div>
r:
<input type="button" value='-' id='left'>
<input type="text" value='0' id='info'>
<input type="button" value='+' id='inon'><br/>
g:
<input type="button" value="-" id='ab'>
<input type="text" value="0" id='ac'>
<input type="button" value="+" id='ad'><br/>
b:
<input type="button" value="-" id='a'>
<input type="text" value="0" id='b'>
<input type="button" value="+" id='c'><br/>
</div>
<div>
<input type="button" value='go' id='d'>
</div>
<script>
var left = document.getElementById('left');
var info = document.getElementById('info');
var inon = document.getElementById('inon');

var ab = document.getElementById('ab');
var ac = document.getElementById('ac');
var ad = document.getElementById('ad');

var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');

var d = document.getElementById('d');
var r = document.getElementById('r')
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";

left.onclick = function(){
info.value --;
if(info.value<0){
info.value = 0;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
inon.onclick = function(){
info.value ++;
if(info.value>255){
info.value = 255;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
ab.onclick = function(){
ac.value --;
if(ac.value<0){
ac.value = 0;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
ad.onclick = function(){
ac.value ++;
if(ac.value>255){
ac.value = 255;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
a.onclick = function(){
b.value --;
if(b.value<0){
b.value = 0;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
c.onclick = function(){
b.value ++;
if(b.value>255){
b.value = 255;
}
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
}
d.onclick = function(){
r.style.backgroundColor ="rgb("+info.value +","+ac.value+","+b.value+")";
if(info.value>255){
info.value = 255;
}else if(info.value<0){
info.value = 0;
}
if(ac.value>255){
ac.value = 255;
}else if(ac.value<0){
ac.value = 0;
}
if(b.value>255){
b.value = 255;
}else if(b.value<0){
b.value = 0;
}
}
</script>

</body>

</html>

//无缝连续滚动解耦

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 130px;
border: 10px solid #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}

.move{
/*这个宽度至关重要*/
width: 8000px;
/*background: red;*/
position: absolute;
top: 0;
left: 0;
}
.move ul{
overflow: hidden;
}

.move ul li {
list-style: none;
/*width: 200px;*/
height: 130px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="move" id='move'>
<ul>
<li><a href="#"><img src="images/shuzi/0.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/1.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/1.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/2.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/pangzi.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/pangzi.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/4.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/5.png" alt=""></a></li>
</ul>
</div>
</div>
<script>
var box = document.getElementById('box');
var move_unit = document.getElementById('move');
var imgul =move_unit.getElementsByTagName('ul');
imgul.innerHTML += imgul.innerHTML;
var imgs = document.getElementsByTagName('img');

var count = 0;
for(var i=0;i<imgs.length; i++){
imgs[i].onload = function(){
count ++;
if(count == imgs.length){
fanzhedian = imgs[imgs.length/2].offsetLeft;
}
}
}
var nowleft = 0;
var timer;
move();
box.onmouseover = function(){
clearInterval(timer);
}
box.onmouseout = function(){
move();
}
function move(){
timer = setInterval (function(){
nowleft -=10;
if(nowleft<-fanzhedian) nowleft=0;
move_unit.style.left = nowleft +'px';

}, 50);
}

</script>
</body>

</html>

//JSON多方向运动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height: 100px;
background: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id='box1'></div>
<div id='box2'></div>
<div id='box3'></div>
<script src ='js/animate-1.0.js'></script>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
animate(box1,{'top':'500px','left':'600px','width':'200px'},5000);
animate(box2,{'top':'200px','left':'100px','height':'200px'},5000);
animate(box3,{'top':'700px','left':'300px'},5000);

// var box = document.getElementsByTagName('div')[0];
// var nowleft = 100;
// var nowtop = 100;
// //计算步长
// var stepleft = 600/100;
// var steptop = 700/100;
// //计算总次数
// var totaltime = 5000;
// var interval =50;
// var maxcount = totaltime / interval;
// //声明 count记录的运动次数
// var count =0;
// var timer = setInterval(function(){
// count++;
// nowleft+=stepleft;
// nowtop +=steptop;

// box.style.left = nowleft+'px';
// box.style.top = nowtop+'px';
// console.log(nowleft,nowtop);

// if(count == 10){
// box.style.left ='700px';
// box.style.top ='500px';
// clearInterval(timer);
// }
// }, interval);

</script>

</body>

</html>

//轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 672px;
height: 350px;
border:2px solid gray;
margin:100px auto;
position: relative;
}
.imglist ul li{
list-style: none;
width: 672px;
height: 350px;
position: absolute;
display: none;
}
.imglist ul li img{
width: 672px;
height: 350px;
}
.current{
display:block;
}
.btn span{
width:55px;
height:55px;
background: url('images/sohu/slide-btnL.png');
display: inline-block;
position: absolute;
top: 50%;
margin-top: -27px;
}

.btn span.leftbtn{
left: 10px;
}

.btn span.rightbtn{
background: url('images/sohu/slide-btnR.png');
right:10px;

}
.circle{
height: 15px;
position: absolute;
bottom:10px;
right:10px;
}
.circle ul li{
width: 15px;
height: 15px;
border-radius: 50%;
background: pink;
margin-right: 10px;
float:left;
}
.circle ul li{
list-style: none;
}
.circle ul li.current{
background: rgb(255,255,255);
}
.imglist ul li.current{
display: block;
}
</style>
</head>
<body>
<div class='box'>
<div class='imglist' id='imglist'>
<ul>
<li class='current'><a href="#"><img src='images/sohu/aaa.jpg'></a></li>
<li><a href="#"><img src='images/sohu/bbb.jpg'></a></li>
<li><a href="#"><img src='images/sohu/ccc.jpg'></a></li>
<li><a href="#"><img src='images/sohu/ddd.jpg'></a></li>
<li><a href="#"><img src='images/sohu/eee.jpg'></a></li>
</ul>
</div>
<div class='btn'>
<ul>
<span class='leftbtn' id='left'></span>
<span class='rightbtn' id='right'></span>
</ul>
</div>
<div class='circle' id='cir'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var imglist = document.getElementById('imglist').getElementsByTagName('li');
var leftbtn = document.getElementById('left');
var rightbtn = document.getElementById('right');
var circle = document.getElementById('cir').getElementsByTagName('li');
var idx=0;
leftbtn.onclick = function(){
idx--;
changePic();
}
rightbtn.onclick = function(){
idx ++;
changePic();
}
function changePic(){
if(idx>imglist.length-1){
idx=0;
}
if(idx<0){
idx=imglist.length-1;
}
for(var i=0; i<imglist.length;i++){
imglist[i].className='';
}
imglist[idx].className ='current';
for(var j =0;j<circle.length;j++){
circle[j].className='';
}
circle[idx].className ='current';

}

for(var k=0; k<circle.length;k++){
circle[k].idxx = k;
circle[k].onmouseover =function(){
idx=this.idxx;
changePic();
}
}

</script>
</body>
</html>