zoukankan      html  css  js  c++  java

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

    一、年月日选择器

    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{ 150px; height:300px;}
    .list{ 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; 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)" 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>
  • 相关阅读:
    pagehelper 分页不生效,总页数总是1解决方案
    SpringBoot--⼯具表达式对象
    H5中input输入框tppe为date时赋值(回显)
    img标签无法显示src中名字中带有中文的图片的问题
    SpringBoot---条件（th:if）
    SpringBoot——静态资源映射规则
    SpringBoot——HelloWorld
    《从零开始学架构》读后感
    《从零开始学架构》笔记——第四部分：架构实战
    《从零开始学架构》笔记——第三部分：可扩展架构模式
  • 原文地址：https://www.cnblogs.com/zhangkeyu/p/6665623.html
Copyright © 2011-2022 走看看