一.写出当前年份的前后5年的日期表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <select id="nian" onclick="dianji()"></select>年 <select id="yue" onclick="dianji()"></select>月 <select id="tian"></select>日 </body> <script type="text/javascript"> nian(); yue(); tian(); function nian() { var b = new Date(); var nian=parseInt(b.getFullYear()); var str=""; for(i=nian-5;i<nian+6;i++) { str=str+"<option value='"+i+"'>"+i+"</option>"; document.getElementById("nian").innerHTML=str; } } function yue() { var str=""; for(i=1;i<13;i++) { str=str+"<option value='"+i+"'>"+i+"</option>"; document.getElementById("yue").innerHTML=str; } } function tian() { var yue=document.getElementById("yue").value; var nian=document.getElementById("nian").value; var ts=31; if(yue==4 || yue==6 || yue==9 || yue==11) { ts=30; } if(yue==2) { if((nian%4==0 && nian%100!=0) || nian%400==0) { ts=29; } else { ts=28; } } var str=""; for(i=1;i<ts+1;i++) { str=str+"<option value='"+i+"'>"+i+"</option>"; document.getElementById("tian").innerHTML=str; } } function dianji() { tian(); } </script> </html>
二.大图轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:250px; height:20px; position:relative; top:-30px;} .img{ width:100%; height:300px; display:none} .yuan{ width:20px; height:20px; background-color:#F00; border:2px solid #FFF; border-radius:100px; float:left; margin-left:30px; cursor:pointer} </style> </head> <body> <br /><br /> <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/fcfaaf51f3deb48fbcf9f4aef21f3a292df57829.jpg" style="display:block" /> <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。，ll.jpg" /> <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/2cf5e0fe9925bc319ab5e0385edf8db1ca1370a2.jpg" /> <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G43447.jpg" /> <div id="wai"> <div class="yuan" onclick="dian('0')" ></div> <div class="yuan" onclick="dian('1')" ></div> <div class="yuan" onclick="dian('2')" ></div> <div class="yuan" onclick="dian('3')" ></div> </div> </body> <script type="text/javascript"> <!--定义索引默认为0--> var sy=0; <!--调方法--> window.setInterval("huan()",4000); function huan() { <!--大图自动轮播--> var img=document.getElementsByClassName("img"); sy++; if(sy>=img.length) { sy=0; } for(i=0;i<img.length;i++) { img[i].style.display="none"; } img[sy].style.display="block"; <!--大图轮播的同时小点跟着换样式--> var yuan=document.getElementsByClassName("yuan"); for(j=0;j<yuan.length;j++) { yuan[j].style.backgroundColor="red"; } yuan[sy].style.backgroundColor="black"; } function dian(s) { <!--让当前的索引sy变成你所点击的索引s。这样下一张图片就会挨着显示--> sy=s; <!--点击小点对应的图片显示--> var img=document.getElementsByClassName("img"); for(i=0;i<img.length;i++) { img[i].style.display="none"; } img[s].style.display="block"; <!--点击小点，小点也对应的跟着换样式--> var yuan=document.getElementsByClassName("yuan"); for(j=0;j<yuan.length;j++) { yuan[j].style.backgroundColor="red"; } yuan[s].style.backgroundColor="black"; } </script> </html>