swith-case 日历

 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>
chendemo轮播图

 

posted @ 2019-07-14 20:32  xiaochen-cmd  阅读(144)  评论(0编辑  收藏  举报