首页 > 代码库 > 练习题：选择器和选择好友

练习题：选择器和选择好友

2024-09-12 11:10:20   217人阅读

一、年月日选择器

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=http://www.mamicode.com/‘"+i+"‘>"+i+"</option>";
    }
     
    document.getElementById("nian").innerHTML = str;
     
}
 
//月数
function FillYue()
{
    var str = "";
    for(var i=1;i<13;i++)
    {
        str = str+"<option value=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}
.list:hover{ cursor:pointer; padding: 0px 1em !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: nowrap !important; background: none rgb(244, 244, 244) !important;"></style>
 
<body><br>
<div id="wai">
    <div class="list" onclick="xuan(this)" onm ouseover="bian(this)" onm ouseout="huifu()">淄博</div>
    <div class="list" onclick="xuan(this)" onm ouseover="bian(this)" onm ouseout="huifu()">张店</div>
    <div class="list" onclick="xuan(this)" onm ouseover="bian(this)" onm ouseout="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>

练习题：选择器和选择好友


联系
我们