练习题:选择器和选择好友
发布日期:2021-10-17 00:06:14 浏览次数:0 分类:技术文章

一、年月日选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
< select  id="nian" onclick="biantian()"></ select >年
< select  id="yue" onclick="biantian()"></ select >月
< select  id="tian"></ select >日
 
< script  type="text/javascript">
FillNian();
FillYue();
FillTian();
function FillNian()
{
     var b = new Date();
     var nian = parseInt(b.getFullYear());
     
     var str = "";
     
     for(var i=nian-5;i< nian +6;i++)
     {
         str = str+"<option value='"+i+"'>"+i+"</ option >";
     }
     
     document.getElementById("nian").innerHTML = str;
     
}
 
//月数
function FillYue()
{
     var str = "";
     for(var i=1;i< 13 ;i++)
     {
         str = str+"<option value='"+i+"'>"+i+"</ option >";
     }
     document.getElementById("yue").innerHTML = str;
}
 
//每月天数的变化
function FillTian()
{
     var yue = document.getElementById("yue").value;
     var nian = document.getElementById("nian").value;
     var ts = 31;
     
     //30号的月数
     if(yue==4 || yue==6 || yue==9 || yue==11)
     {
         ts=30;
     }
     
     //2月不同年的天
     if(yue==2)
     {
         if((nian%4==0 && nian%100 != 0) || nian%400==0)
         {
             ts = 29;
         }
         else
         {
             ts = 28;
         }
     }
     
     var str = "";
     for(var i=1;i< ts +1;i++)
     {
         str = str+"<option value='"+i+"'>"+i+"</ option >";
     }
     document.getElementById("tian").innerHTML = str;
}
 
 
function biantian()
{
     FillTian();
}
</ script >
</ body >

 

二、选择好友

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
样式:
< style  type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:150px; height:300px;}
.list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}
.list:hover{ cursor:pointer; background-color:#00C}
</ style >
 
< body >< br >
< div  id="wai">
     < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">淄博</ div >
     < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张店</ div >
     < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">桓台</ div >
</ div >
 
</ body >
 
< script  type="text/javascript">
 
function xuan(d)
{
     //清原来的颜色
     var list = document.getElementsByClassName("list");
     for(var i=0;i< list.length ;i++)
     {
         list[i].removeAttribute("bs");
         list[i].style.backgroundColor = "#66F";
     }
     //选
     d.setAttribute("bs",1);
     d.style.backgroundColor = "#00C";
}
 
function bian(d)
{
     //清
     var list = document.getElementsByClassName("list");
     for(var i=0;i<list.length;i++)
     {
         if(list[i].getAttribute("bs")!="1")
         {
             list[i].style.backgroundColor = "#66F";
         }
     }
     //选
     d.style.backgroundColor = "#00C";
}
 
function huifu()
{
     var list = document.getElementsByClassName("list");
     for(var i=0;i<list.length;i++)
     {
         if(list[i].getAttribute("bs")!="1")
         {
             list[i].style.backgroundColor = "#66F";
         }
     }
}
 
</script>
上一篇:Windows对象操作:浏览器窗口信息
下一篇:搭建wamp环境,数据库基础知识