美文网首页
报名页面总结

报名页面总结

作者: 胖太_91bf | 来源:发表于2017-10-18 14:46 被阅读0次

    1.下拉列表出生日期

    //js部分
            window.onload=function(){
                var selects = document.getElementsByTagName("select");//通过标签名获取select对象
                var date = new Date();
                var nowYear = date.getFullYear()-1;//获取当前的年
                var opt = document.getElementById('opt')
                for(var i=nowYear-100;i<=nowYear;i++){
                    var optionYear = document.createElement("option");
                    optionYear.innerHTML=i;
                    optionYear.value=i;
                    selects[0].insertBefore(optionYear, opt);
                }
                for(var i=1;i<=12;i++){
                    var optionMonth = document.createElement("option");
                    optionMonth.innerHTML=i;
                    optionMonth.value=i;
                    selects[1].appendChild(optionMonth);
                }
                getDays(selects[0].value,selects[0].value,selects);
            }
            // 获取某年某月存在多少天
            function getDaysInMonth(month,year){
                var days;
                if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) {
                    days=31;
                }else if (month==4 || month==6 || month==9 || month==11){
                    days=30;
                }else{
                    if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) {     // 判断是否为润二月
                        days=29;
                    }else {
                        days=28;
                    }
                }
                return days;
            }
            function setDays(){
                var selects = document.getElementsByTagName("select");
                var year = selects[0].options[selects[0].selectedIndex].value;
                var month = selects[1].options[selects[1].selectedIndex].value;
                getDays(month,year,selects);
            }
            function getDays(month,year,selects){
                var days = getDaysInMonth(month,year);
                selects[2].options.length = 0;
                for(var i=1;i<=days;i++){
                    var optionDay = document.createElement("option");
                    optionDay.innerHTML=i;
                    optionDay.value=i;
                    selects[2].appendChild(optionDay);
                }
            }
    

    html 结构

                   <div class="date1">
                        <select onchange="setDays()" id="year">
                            <option value="2017" id="opt">2017</option>
                        </select>
                        <span>年</span>
                        <select onchange="setDays()" id="month"></select>
                        <span>月</span>
                        <select id="day"></select>
                        <span>日</span>
                    </div>
    

    2.添加和移除disabled属性

    //添加disabled
    $('#sick').attr('disabled',true)
    //移除disabled
    $('#sick').removeAttr('disabled')
    
    1. 获取radio选中的值
    $(".checkbox input[type='radio']:checked").val()
    

    4.点击判断checkbox是否本选中状态

        $('#sicks').click(function() {
            console.log(this.checked)
            if(this.checked) {
                //选中后的操作
            } else {
                为取消选中后的操作
            }
        })
    
    1. 获取上传图片的base64代码
    function readURL(input,img) {
        if (input.files && input.files[0]) {
            console.log(input.files);
            var reader = new FileReader();
            reader.onload = function (e) {
                img.attr('src', e.target.result);
                console.log(e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    1. 如何判断数组全部循环一遍
      var arr = [ 1,2,3,4,5,6,7,8 ];
      var i = 0;
       arr.forEach(function(item){
          i ++;
       })
       if(i === arr.length) {
          console.log('arr已经被全部循环一遍')
       }
    
    1. input[type=file] 调用手机系统相册方法
    <input type="file" accept="image/*"/>
    //添加accept属性,有三个参数accept="audio/*和"accept="video/*"
    

    相关文章

      网友评论

          本文标题:报名页面总结

          本文链接:https://www.haomeiwen.com/subject/obteuxtx.html