国模小婕私拍鲜嫩玉门,日本伦色情理电影在线看,波多野结衣作品番号

網上有很多實現日期插件的方法，不過擴展了些，相對于項目實用方法。

html結構及其配置參數

引入css，引入js即可，值得興奮的事是用原生js編寫的，所以量級方面會小一點，當然這個插件并不是很炫，不過確實很實用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期插件</title>
    <link rel="stylesheet" href="css/date1.2.css" />
</head>
<body>
<input type="text" id="ipt" style="margin: 50px;width:50%;height: 30px;" />
<input type="text" id="ipt1" style="margin-left:500px "/>
<script src="js/TaoTaoDate.js"></script>
<script>
    TaoTaodate({
        dateId:"ipt", //input 上面的id
        skin:"red",   //皮膚配置參數
        interval:" - " // 分隔符參數配置
    })
    TaoTaodate({
        dateId:"ipt1",
        interval:" /\ "
    })
</script>
</body>
</html>

CSS代碼

這個css需要處理一下默認樣式，默認樣式使用網上相對簡單標準的樣式初始化代碼

body{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    /*font-family:"Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
}
html,body{
    background-repeat: no-repeat;
    -webkit-text-size-adjust:none;
}
.clearfix:after {
    content: "." ;
    display: block ;
    height: 0 ;
    clear: both ;
    visibility: hidden ;
}
a{
    text-decoration:none;
    outline: none;
}
li{
    list-style-type:none;
}
img{
    width: 100%;
    max-width: 100%;
    /*vertical-align: top;*/
    font-size:0.5rem;
}

html, body, h1, h2, h3, p, span, a, div, ol, ul, li, dl, dt, dd, table, tbody, tfoot, thead, tr, th, td, input, textarea, form, select {
    padding: 0;
    margin: 0;
    /*font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
    box-sizing:border-box;
}
h1, h2, h3 {
    font-size: 100%;
}
button{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:none;
    border:1px solid #ccc;
}
input[type=button],input[type=submit]{
    -webkit-appearance:none;
    outline:none;
}
/**
插件重要樣式
 */
div.date_div_containers{
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
table.date_table_tables{
    border: 1px solid #eeeeee;
    border-collapse: collapse;

}
table.date_table_tables thead th{
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #eee;
    background: #eee;
    color: #FFFFFF;
}
table.date_table_tables tbody td{
    width: 40px;
    height: 30px;
    color: #333333;
    line-height: 30px;
    text-align: center;
    border: 1px solid #eeeeee;
    background: #fff;
    cursor: pointer;

}
select.date_select_selts{
    width: 25%;
    height: 25px;
    border: 1px solid #eeeeee;
}

JavaScript 代碼

這塊算是比較激動人心了吧？注釋寫的挺詳細的，就不多說了。

/**
 * Created by 濤 on 2017/4/18.
 */
function TaoDate(obj) {
    var _this =this;
    //擴展參數配置
    this.bgColor=obj["skin"]?obj["skin"]:"#eee";
    this.interval=obj["interval"]?obj["interval"]:"-";
    //渲染頭部，以及表格頭節點
   this.setDateDom(obj["dateId"]);
   //初始化select內容
   this.sElect(obj["dateId"]);
   //渲染表格盒子
    this.dateBox(obj["dateId"]);
    //擴展換膚功能
    this.dateSkin(this.bgColor,obj["dateId"]);
    //講日期放在table盒子當中
    this.Tab(obj["dateId"]);
    //規定日期盒子位置函數
    this.inputOffset(obj["dateId"]);
    var myDiv =document.getElementById(obj["dateId"]+"_divId");
    var divArray =document.getElementsByClassName("date_div_containers");
    var ipt =document.getElementById(obj["dateId"]);
    ipt.setAttribute("readonly","readonly");
    //當配置好這個控件，顯示本地年月日
    var iptVal =new Date();
    ipt.value=iptVal.getFullYear()+this.interval+(iptVal.getMonth()+1)+
        this.interval+iptVal.getDate();
    //============================事件區域=================
    //點擊輸入框
    ipt.onfocus=function(){
        //保證每次只能有一個input能出現日期盒子
        for(var i =0;i<divArray.length;i++){
            divArray[i].style.display='none';
        }
        myDiv.style.display="block";
    }
    //年份change事件
    myDiv.getElementsByClassName("date_select_selts")[0].onchange=function(){
        _this.Tab(obj["dateId"]);
    }
    //月份change事件
    myDiv.getElementsByClassName("date_select_selts")[1].onchange=function(){
        _this.Tab(obj["dateId"]);
    }
    //事件委托點擊被選中的日期，進入輸入框中
    myDiv.onclick=function(ev){
        for(var i =0;i<myDiv.getElementsByTagName("td").length;i++){
            myDiv.getElementsByTagName("td")[i].style.backgroundColor="#fff";
        }
        ev =window.event||ev; //獲取事件源
        var target =ev.target||ev.srcElement; //捕捉事件
        if(target.nodeName.toLowerCase()==="td"&&target.innerHTML!=""){
            ipt.value=myDiv.getElementsByClassName("date_select_selts")[0].value+_this.interval
            +myDiv.getElementsByClassName("date_select_selts")[1].value+_this.interval
            +target.innerHTML;
            target.style.backgroundColor=_this.bgColor;
            //點完就讓消失
            myDiv.style.display='none';
        }
        return false;//阻止冒泡阻止默認事件
    }
    //事件委托點擊頁面消失
    document.onclick=function(ev){
        ev =window.event||ev; //獲取事件源
        var target =ev.target||ev.srcElement; //捕捉事件
       if(target.nodeName.toLowerCase()=="html")
           for(var i =0;i<divArray.length;i++){
               divArray[i].style.display='none';
           }
    }

}
/**
 * 獲取某一年的某一月1號是星期幾
 * @param year
 * @param month
 * @returns {number}
 */
TaoDate.prototype.getone = function (year, month) {
    return new Date(year, month - 1, 1).getDay();
};
/**
 * 獲取某一個年某一月有多少天
 * @param year
 * @param month
 * @returns {number}
 */
TaoDate.prototype.getDaysInOneMonth = function (year, month) {
    month = parseInt(month, 10); //強轉成數字
    var d = new Date(year, month, 0);  //這個是都可以兼容的
    return d.getDate();
};
/**
 * 通過input id屬性搭建結構屬性
 * @param id
 */
TaoDate.prototype.setDateDom = function(id) {
    var week =["周一","周二","周三","周四","周五","周六","周日"];
    var oDiv =document.createElement("div");
    oDiv.setAttribute("class","date_div_containers");
    oDiv.setAttribute("id",id+"_divId");
    var Asel =document.createElement("select");
    Asel.setAttribute("class","date_select_selts");
    Asel.setAttribute("id",id+"_date_select_selts");
    oDiv.appendChild(Asel);
    var spanHtml =document.createElement("span");
    spanHtml.setAttribute("class","date_span_text");
    spanHtml.appendChild(document.createTextNode("    年     "))
    oDiv.appendChild(spanHtml);
    var Asel =document.createElement("select");
    Asel.setAttribute("class","date_select_selts");
    Asel.setAttribute("id",id+"_date_select_selts1");
    oDiv.appendChild(Asel);
    var spanHtml =document.createElement("span");
    spanHtml.setAttribute("class","date_span_text");
    spanHtml.appendChild(document.createTextNode("    月   "))
    oDiv.appendChild(spanHtml);
    var tables =document.createElement("table");
    tables.setAttribute("class","date_table_tables");
    tables.setAttribute("id",id+"_date_table_tables");
    tables.appendChild(document.createElement("thead"));
    for(var i =0;i<7;i++){
        tables.getElementsByTagName("thead")[0].appendChild(document.createElement("th"));
        tables.getElementsByTagName("thead")[0].getElementsByTagName("th")[i].innerHTML=week[i];
    }
    tables.appendChild(document.createElement("tbody"));
    oDiv.appendChild(tables);
    document.body.appendChild(oDiv);

}
/**
 * 年份、月份 (起始年份/起始月份 -- 結束年份/結束月份)
 * @param beginNum 起始
 * @param closeNum  結束
 * @returns {string}
 */
TaoDate.prototype.forVal=function(beginNum,closeNum){
    var str ='';
    for(var i =beginNum;i<=closeNum;i++){
        str+="<option>"+i+"</option>";
    }
    return str;
}
/**
 * 初始化年份，月份！
 */
TaoDate.prototype.sElect=function(id){
    var sel= document.getElementById(id+"_divId").getElementsByClassName("date_select_selts");
    sel[0].innerHTML=this.forVal(1990,2099);
    sel[1].innerHTML=this.forVal(1,12);
    var date =new Date();
    sel[0].value=date.getFullYear();
    sel[1].value=date.getMonth()+1;
}
/**
 * 通過div上id創建表格
 * @param id
 */
TaoDate.prototype.dateBox=function(id){
    var div1 =document.getElementById(id+"_date_table_tables");
    for(var i =0;i<6;i++){
        var aTR = document.createElement("tr");
        div1.tBodies[0].appendChild(aTR);
        for(var j =0;j<7;j++){
            var aTd =document.createElement("td");
            div1.tBodies[0].rows[i].appendChild(aTd);
        }
    }
}
TaoDate.prototype.Tab=function(id){
    var tds = document.getElementById(id+"_date_table_tables")
        .getElementsByTagName("td");
    var date =new Date();
    //渲染前先清空，避免上次與本次內容沖突
    for(var j=0;j<tds.length;j++){
        tds[j].innerHTML="";
        tds[j].style.backgroundColor='';
    }
    var sel= document.getElementById(id+"_divId").getElementsByClassName("date_select_selts");
    var year =this.getone(sel[0].value,sel[1].value);
    year=year-1;
    year =year==-1?6:year;
    var month =this.getDaysInOneMonth(sel[0].value,sel[1].value);
    for(var i=year;i<month+year;i++){
        tds[i].innerHTML=i-year+1;
    }
    tds[date.getDate()+year-1].style.backgroundColor=this.bgColor;
}
/**
 * 日期盒子規定在哪個位置
 * @param id 傳入id
 * @param num  傳入input高度
 */
TaoDate.prototype.inputOffset=function(id){
    var TaoDate =document.getElementById(id);
    var oDiv =document.getElementById(id+"_divId");
    oDiv.style.left=TaoDate.offsetLeft+"px"
    oDiv.style.top=TaoDate.offsetTop+TaoDate.offsetHeight+"px";
}
TaoDate.prototype.dateSkin=function(skin,id){
    var ths =document.getElementById(id+"_date_table_tables").getElementsByTagName("th");
    var tds =document.getElementById(id+"_date_table_tables").getElementsByTagName("td");
    for(var i =0;i<ths.length;i++){
        ths[i].style.background=skin;
        ths[i].style.borderColor=skin;

    }
    for(var j =0;j<tds.length;j++){
        tds[j].style.borderColor=skin;
    }

}
//主函數調用方法
function TaoTaodate(json){
    return new TaoDate(json);
}

總結：

插件開發方式有很多，其實應該再插件里面寫一個默認參數對象的。用傳入的對象參數覆蓋，默認參數，而且應該多多抽象一些方法，如可以單獨抽象出document.getElementById方法，追其根本，有意無意模仿了一波jquery，不過量級上肯定是小的。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

原生js日期插件實現

原生js日期插件實現

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

原生js日期插件實現

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频