1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 // 用for循环和switch循环,判断7月份周一至周日各有几天,并输出 10 var week=[0,0,0,0,0,0,0]; 11 for(var i=1;i<=31;i++){ 12 switch(i%7){ 13 case 0: 14 week[i%7+6]++; 15 break; 16 case 1: 17 week[i%7-1]++; 18 break; 19 case 2: 20 week[i%7-1]++; 21 break; 22 case 3: 23 week[i%7-1]++; 24 break; 25 case 4: 26 week[i%7-1]++; 27 break; 28 case 5: 29 week[i%7-1]++; 30 break; 31 case 6: 32 week[i%7-1]++; 33 break; 34 default: 35 break; 36 } 37 } 38 // console.log(week[6]); 39 for(var j=0;j<week.length;j++){ 40 console.log("周"+(j+1)+"共有"+week[j]+"天"); 41 } 42 </script> 43 </body> 44 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 #show{ 12 width: 500px; 13 overflow: hidden; 14 margin:200px auto; 15 /*border: 3px solid black;*/ 16 position: relative; 17 } 18 div ul{ 19 list-style: none; 20 width: 3000px; 21 overflow: hidden; 22 } 23 div ul li{ 24 float:left; 25 } 26 div span{ 27 position: absolute; 28 width:40px; 29 height: 40px; 30 background: rgba(0,0,0,0.5); 31 top:50%; 32 margin-top: -20px; 33 font-size:30px; 34 text-align: center; 35 line-height: 37px; 36 color: white; 37 cursor: pointer; 38 } 39 div #btn_left{ 40 left: -10px; 41 border-radius: 0px 20px 20px 0px ; 42 } 43 div #btn_right{ 44 right:-10px; 45 border-radius: 20px 0px 0px 20px ; 46 } 47 #ol1{ 48 list-style: none; 49 overflow: hidden; 50 background: #ccc; 51 height: 20px; 52 width: 88px; 53 border-radius: 10px; 54 position: absolute; 55 left:50%; 56 margin-left: -44px; 57 bottom: 30px; 58 } 59 #ol1 li{ 60 float:left; 61 width: 10px; 62 height: 10px; 63 background: white; 64 border-radius: 50%; 65 margin-right:7px; 66 margin-top: 5px; 67 cursor: pointer; 68 } 69 #ol1 li:nth-of-type(5){ 70 margin-right: 0px; 71 } 72 #ol1 li:nth-of-type(1){ 73 margin-left: 5px; 74 background: #f60; 75 } 76 </style> 77 </head> 78 <body> 79 <div id="show"> 80 <ul id="ul1"> 81 <li><img src="img/bg01.jpg" alt="" width="500px"/></li> 82 <li><img src="img/bg02.jpg" alt="" width="500px"/></li> 83 <li><img src="img/bg03.jpg" alt="" width="500px"/></li> 84 <li><img src="img/bg04.jpg" alt="" width="500px"/></li> 85 <li><img src="img/bg05.jpg" alt="" width="500px"/></li> 86 </ul> 87 <span id="btn_left"> < </span> 88 <span id="btn_right"> > </span> 89 <ol id="ol1"> 90 <li></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 <li></li> 95 </ol> 96 </div> 97 <script> 98 var ul1=document.getElementById('ul1'); 99 var show=document.getElementById('show'); 100 var btn_l=document.getElementById('btn_left'); 101 var btn_r=document.getElementById('btn_right'); 102 // document.getElementsByTagName('li'); 103 var ol1=document.getElementById('ol1').children; 104 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标 105 var i=0; 106 var timer; 107 timer=setInterval(function(){ 108 for(var g=0;g<ol1.length;g++){ 109 ol1[g].style.background='white'; 110 } 111 i++; 112 // ul1.style.transition='all 1s'; 113 if(i==5){ 114 i=0; 115 ul1.style.transition='none'; 116 } 117 ul1.style.marginLeft=-500*i+"px"; 118 ol1[i].style.background='#f60'; 119 // ul1.style.marginLeft=-i+"px"; 120 },1000); 121 show.onmouseover=function(){ 122 clearInterval(timer); 123 } 124 show.onmouseout=function(){ 125 clearInterval(timer); 126 timer=setInterval(function(){ 127 for(var g=0;g<ol1.length;g++){ 128 ol1[g].style.background='white'; 129 } 130 i++; 131 if(i==5){ 132 i=0; 133 ul1.style.transition='none'; 134 } 135 ul1.style.marginLeft=-500*i+"px"; 136 ol1[i].style.background='#f60'; 137 },1000); 138 } 139 btn_l.onclick=function(){ 140 i--; 141 if(i==-1){ 142 i=4; 143 } 144 ul1.style.marginLeft=-500*i+"px"; 145 } 146 btn_right.onclick=function(){ 147 i++; 148 if(i==5){ 149 i=0; 150 } 151 ul1.style.marginLeft=-500*i+"px"; 152 } 153 for(var j=0;j<ol1.length;j++){ 154 // 1,先给所有的li标签设置下标值 setAttribute方法 155 // 2,点击之后,获取当前点击中的li标签的index值 156 // 3,把获取到的index值,用于ul1 157 // this:当前操作的对象 158 ol1[j].setAttribute('index',j); 159 ol1[j].onclick=function(){ 160 var index=this.getAttribute('index'); 161 i=index; 162 console.log(index); 163 for(var k=0;k<ol1.length;k++){ 164 ol1[k].style.background='white'; 165 } 166 this.style.background='#f60'; 167 ul1.style.marginLeft=-500*index+"px"; 168 } 169 } 170 </script> 171 </body> 172 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0px; 9 margin: 0px; 10 } 11 #show{ 12 width: 250px; 13 margin: 200px auto; 14 overflow: hidden; 15 position: relative; 16 } 17 #pic{ 18 width: 2000px; 19 list-style: none; 20 overflow: hidden; 21 transition: all 1s; 22 } 23 #show #pic li{ 24 float: left; 25 } 26 #show span{ 27 width: 36px; 28 height: 36px; 29 position: absolute; 30 top: 50%; 31 margin-top: -18px; 32 font-size: 28px; 33 color: white; 34 text-align: center; 35 line-height: 36px; 36 background: rgba(0,0,0,0.5); 37 cursor: pointer; 38 } 39 #show #btn_left{ 40 left: -8px; 41 border-radius:0px 18px 18px 0px ; 42 } 43 #show #btn_right{ 44 right: -8px; 45 border-radius:18px 0px 0px 18px ; 46 } 47 #show ol{ 48 list-style: none; 49 position: absolute; 50 text-align: center; 51 font-size: 0px; 52 bottom: 13px; 53 margin-left: -30px; 54 left: 50%; 55 border-radius: 10px; 56 background: rgba(255,255,255,.3); 57 } 58 #show ol li{ 59 display: inline-block; 60 margin: 3px; 61 border-radius: 50%; 62 width: 8px; 63 height: 8px; 64 color: #3C3C3C; 65 cursor: pointer; 66 background: #FFFFFF; 67 } 68 #show #ol1 li:nth-of-type(1){ 69 background: #f60; 70 } 71 </style> 72 </head> 73 <body> 74 <div id="show"> 75 <ul id="pic"> 76 <li><img src="images/pic25.jpg"/></li> 77 <li><img src="images/pic24.jpg"/></li> 78 <li><img src="images/pic23.jpg"/></li> 79 <li><img src="images/pic22.jpg"/></li> 80 <li><img src="images/pic21.jpg"/></li> 81 </ul> 82 <span id="btn_left"> 83 < 84 </span> 85 <span id="btn_right"> 86 > 87 </span> 88 <ol id="ol1"> 89 <li></li> 90 <li></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 </ol> 95 </div> 96 <script type="text/javascript"> 97 var ul=document.getElementById('pic'); 98 var show=document.getElementById('show'); 99 var le=document.getElementById('btn_left'); 100 var ri=document.getElementById('btn_right'); 101 var ol=document.getElementById('ol1').children; 102 var i=0; 103 var timer; 104 timer=setInterval(function(){ 105 for(var q=0;q<ol.length;q++){ 106 ol[q].style.background='#FFFFFF'; 107 } 108 i++; 109 ul.style.transition='all 1s'; 110 if(i==5){ 111 ul.style.transition='none'; 112 i=0; 113 } 114 ul.style.marginLeft=-250*i+"px"; 115 ol[i].style.background='#FF6600'; 116 },1000); 117 show.onmouseover=function(){ 118 clearInterval(timer); 119 } 120 show.onmouseout=function(){ 121 clearInterval(timer); 122 timer=setInterval(function(){ 123 for(var q=0;q<ol.length;q++){ 124 ol[q].style.background='#FFFFFF'; 125 } 126 i++; 127 ul.style.transition='all 1s'; 128 if(i==5){ 129 ul.style.transition='none'; 130 i=0; 131 } 132 ul.style.marginLeft=-250*i+"px"; 133 ol[i].style.background='#FF6600'; 134 },1000); 135 } 136 le.onclick=function(){ 137 i--; 138 console.log(i); 139 if(i<0){ 140 i=4; 141 } 142 for(var g=0;g<ol.length;g++){ 143 ol[g].style.background='#FFFFFF'; 144 } 145 ol[i].style.background='#FF6600'; 146 ul.style.marginLeft=-250*i+"px"; 147 } 148 ri.onclick=function(){ 149 i++; 150 if(i==4){ 151 i=0; 152 } 153 for(var n=0;n<ol.length;n++){ 154 ol[n].style.background='#FFFFFF'; 155 } 156 ol[i].style.background='#FF6600'; 157 ul.style.marginLeft=-250*i+"px"; 158 } 159 for(var d=0;d<ol.length;d++){ 160 ol[d].setAttribute('index',d); 161 162 ol[d].onclick=function(){ 163 var index=this.getAttribute('index'); 164 i=index; 165 for(var j=0;j<ol.length;j++){ 166 ol[j].style.background='#FFFFFF'; 167 } 168 this.style.background='#FF6600'; 169 ul.style.marginLeft=-250*index+"px"; 170 } 171 } 172 </script> 173 </body> 174 </html>