国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js手?jǐn)]一個日歷，支持范圍選擇（帶背景色）

xavier / 2196人閱讀

摘要：一個支持范圍選擇的日歷移動端需求原型日歷默認(rèn)顯示當(dāng)前月，并且標(biāo)注當(dāng)日的日期，當(dāng)日以后得日期置灰不可以選擇。日歷支持選擇某單個日期和范圍選擇，并且選中的兩個日期之間要加背景色。

一個支持范圍選擇的日歷（移動端）

需求原型：
1、日歷默認(rèn)顯示當(dāng)前月，并且標(biāo)注當(dāng)日的日期，當(dāng)日以后得日期置灰不可以選擇。
2、日歷支持選擇某單個日期和范圍選擇，并且選中的兩個日期之間要加背景色。
3、限制最多選擇6個月，超出六個月提示“最多選擇6個月”，并且日歷滾動到選擇的起始日期位置，保留開始日期的選中效果，繼續(xù)選擇結(jié)束日期。
4、在顯示周的元素下面，要有個顯示當(dāng)前滾動到的年月的元素并帶有動畫效果。
demo采用的是rem布局。
需求大概就是這個樣子，下面貼代碼咯：

具體實現(xiàn)邏輯

index.html

    



    
    日歷
    
    
    
    
    
    
    Document
    
    



    

        

            日歷范圍選擇
            
        

        
    
        
    
            
        
    
    
    
    
    
        
    
            
    
        
    
        
    最多可選六個月，請重新選擇！

    base.css

        html, body {
    width: 100%;
    height: 100%;
  }
  
  #app {
    width: 100%;
    height: 100%;
  }
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  
  input,
  select,
  textarea {
    font-size: 100%;
  }
  
  th {
    text-align: inherit;
  }
  
  a img,
  fieldset,
  img {
    border: 0;
  }
  
  ol,
  ul {
    list-style: none;
  }
  
  caption,
  th {
    text-align: left;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
    font-weight: 500;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a,
  ins {
    text-decoration: none;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  ::-webkit-input-placeholder {
    color: #939799;
  }
  
  :-moz-placeholder {
    color: #939799;
  }
  
  ::-moz-placeholder {
    color: #939799;
  }
  
  input::-ms-clear, input::-ms-reveal {
    display: none;
  }
  
  @media screen and (max-width: 1024px) {
    #app {
      width: auto;
      height: auto;
    }
    .continer {
      position: relative !important;
      width: 100%;
      height: 100% !important;
      display: flex;
      justify-content: center;
      padding-top: 70px !important;
      padding-bottom: 170px;
    }
  }
  
  @media screen and (min-width: 1025px) {
    #app {
      width: 100% !important;
      height: 100% !important;
    }
  }

    calnder.css

        
.header-top {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    z-index: 999;
  }
  
  .header-top .control-box {
    width: 100%;
    height: 1.6rem;
    font-size: 0.42667rem;
    font-weight: 400;
    color: #363c54;
    padding: 0.53333rem 0.8rem 0.53333rem 0.66667rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-top .control-box span:nth-child(2) {
    display: inline-block;
    width: 0.53333rem;
    height: 0.53333rem;
    /* background: url("../static/images/close.png") no-repeat center; */
    background-size: cover;
  }
  
  .header-top .pushUp {
    animation: moveDown .5s  alternate;
    -webkit-animation: moveDown .5s  alternate;
    -moz-animation: moveDown .5s  alternate;
    -o-animation: moveDown .5s  alternate;
    -ms-animation: moveDown .5s  alternate;
  }
  
  .header-top .pushDown {
    animation: moveUp .5s  alternate;
    -webkit-animation: moveUp .5s  alternate;
    -moz-animation: moveUp .5s  alternate;
    -o-animation: moveUp .5s  alternate;
    -ms-animation: moveUp .5s  alternate;
  }
  
  @keyframes moveUp {
    0% {
      transform: translateY(-0.8rem);
    }
    50% {
      transform: translateY(0.53333rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes moveDown {
    0% {
      transform: translateY(-0.8rem);
    }
    50% {
    }
    100% {
      transform: translateY(0);
    }
  }
  
  .header-top #week-item {
    width: 90%;
    height: 1.06667rem;
    list-style: none;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    position: relative;
    background: #fff;
    z-index: 10;
    padding-right: 0.34667rem;
  }
  
  .header-top #week-item::after {
    background-color: #f0f1f2;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
  }
  
  .header-top #week-item li {
    font-size: 0.37333rem;
    font-weight: 400;
    color: #363c54;
  }
  
  .header-top .current-time {
    width: 100%;
    text-align: center;
    font-size: 0.37333rem;
    font-weight: 400;
    color: #9b9da9;
    background: #fff;
  }
  
  .header-top .current-time #current-time {
    height: 1.04rem;
    line-height: 1.04rem;
    text-align: center;
    font-size: 0.37333rem;
    font-weight: 400;
    color: #9b9da9;
    border: none;
    background: #fff;
    transition: .3s all;
    border-color: transparent;
    -webkit-appearance: none;
  }
  
  .main {
    width: 100%;
    height: 100%;
  }
  
  .main .current-month {
    width: 90%;
    height: 1.06667rem;
    line-height: 1.06667rem;
    font-size: 0.37333rem;
    font-weight: 400;
    text-align: center;
    margin: 0.13333rem auto;
    color: #9b9da9;
    position: relative;
  }
  
  .main .current-month::before {
    background-color: #f0f1f2;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
  }
  
  .main .l-border {
    border-radius: 50% 0 0 50% !important;
  }
  
  .main .r-border {
    border-radius: 0 50% 50% 0 !important;
  }
  .main .calendar__dialog{
      display: none;
      width: 7.73333rem;
      height: 1.73333rem;
      line-height: 1.73333rem;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 0.13333rem;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 0.42667rem;
      font-weight: 400;
      color: white;
      z-index: 999;
  }
  
  .mode-one {
    width: 100%;
    align-content: space-between;
    margin-top: 2.93333rem;
    background: #fff;
    padding-bottom: 2rem;
  }
  
  .mode-one .month {
    position: relative;
    color: #141414;
    width: 100%;
    padding: 0 0.64rem 0 0.72rem;
  }
  
  .mode-one .month .after-dom {
    width: 100%;
    height: 1rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  
  .mode-one .dateItem {
    cursor: pointer;
  }
  
  .mode-one .disabled {
    color: #cdced4 !important;
  }
  
  .mode-one .cover-background {
    background: #20c997;
  }
  
  .mode-one .month .item {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.37333rem;
    line-height: 1.2rem;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    position: relative;
    color: #363C54;
    margin: 0.12rem 0;
    z-index: 11;
  }
  
  .mode-one .now::after {
    background-color: #20c997;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    bottom: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    transform-origin: 0 0;
  }
  
  .mode-one .month .active {
    background: #20c997;
    border-radius: 50%;
  }
  
  .calendar-content {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
  
  .calendar__box {
    width: 100%;
    height: 100%;
    z-index: 998;
  }
  
  .footer-box {
    width: 100%;
    height: 2rem;
    background: white;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(0);
    margin-top: 2rem;
    z-index: 12;
  }
  
  .footer-box div {
    width: 8.66667rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: #CDCED4;
    border-radius: 0.6rem;
    text-align: center;
    font-size: 0.42667rem;
    font-weight: 400;
    color: white;
  }
  
  .cover_back {
    background: #20c997 !important;
  }
  
  .hideCalendar {
    transition: .3 all;
    transform: translateX(-100%, 0) !important;
  }

    resize.js

    ; (function () {
    resize()
    window.onresize = resize;
})()    

function resize () {
    if (document.documentElement.clientWidth >= 750) {
        document.documentElement.style.fontSize = "75px";
        return
    }
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px"
}

    utils.js

        let Utils = {
    getElement(selector) {
        return document.querySelector(selector);
    },
    getAllElement(selector) {
        return document.querySelectorAll(selector);
    },
    timePad(time) {
        return time < 10 ? "0" + time : time;
    }
}
function daysInMonth(month, year) {
    return new Date(year, month + 1, 0).getDate();
}

function _Set(data_id, data) {
    if (data_id != "") {
        if (data) {
            var lsobj = window.localStorage;
            var datajson = JSON.stringify(data);
            lsobj.setItem(data_id, datajson);
        }
    }
}

function _Get(data_id) {
    if (data_id != "") {
        var data = null;
        var lsdata = window.localStorage;
        try {
            var datajson = lsdata.getItem(data_id);
            datajson = JSON.parse(datajson);
            data = datajson;
        } catch (e) {

        } finally {
            return data;
        }
    }
}


let scrollAction = {
    x: "undefined",
    y: "undefined"
},
scrollDirection;

// 判斷頁面滾動方向
function scrollFunc() {
if (typeof scrollAction.x == "undefined") {
    scrollAction.x = window.pageXOffset;
    scrollAction.y = window.pageYOffset;
}
let diffX = scrollAction.x - window.pageXOffset;
let diffY = scrollAction.y - window.pageYOffset;
if (diffX < 0) {
    // Scroll right
    scrollDirection = "right";
} else if (diffX > 0) {
    // Scroll left
    scrollDirection = "left";
} else if (diffY < 0) {
    // Scroll down
    scrollDirection = "down";
} else if (diffY > 0) {
    // Scroll up
    scrollDirection = "up";
} else {
    // First scroll event
}
scrollAction.x = window.pageXOffset;
scrollAction.y = window.pageYOffset;
};

// 檢測兩個div是否重疊
function collision(target, current) {
    let targetX = target.offsetLeft;
    let targetY = target.offsetTop;
    let targetW = target.offsetWidth;
    let targetH = target.offsetHeight;
    let currentX = current.offsetLeft;
    let currentY = current.getBoundingClientRect().top;
    let currentW = current.offsetWidth;
    let currentH = current.offsetHeight;
    return (targetX + targetW > currentX && targetX < currentX + currentW && targetY + targetH > currentY &&
        targetY < currentY + currentH);
}

// 計算當(dāng)前選擇日期往后推6個月
function calcDate(str) {
    str = str.replace(/-/g, "/");
    let date = new Date(str);
    //日期轉(zhuǎn)文本方式一：
    let year = date.getFullYear(); //年
    let month = date.getMonth() + 7; //月 +6個月  因為js里month從0開始，所以要加1
    if (month > 12) {
        year++;
        month -= 12;
    }
    let date2 = new Date(year, month, 0); //新的年月
    let day1 = date.getDate();
    let day2 = date2.getDate();
    if (day1 > day2) { //防止+6月后沒有31天
        day1 = day2;
    }
    str = year + "-" +
        Utils.timePad(month) +
        "-" +
        Utils.timePad(day1);
    return str;
}

// 獲取兩個日期之間的值
Date.prototype.format = function () {
    let s = "";
    let mouth = (this.getMonth() + 1) >= 10 ? (this.getMonth() + 1) : ("0" + (this.getMonth() + 1));
    let day = this.getDate() >= 10 ? this.getDate() : ("0" + this.getDate());
    s += this.getFullYear() + "-"; // 獲取年份。
    s += mouth + "-"; // 獲取月份。
    s += day; // 獲取日。
    return (s); // 返回日期。
};
// 獲取兩個日期之間的值
function getAll(begin, end) {
    let arr = [];
    let ab = begin.split("-");
    let ae = end.split("-");
    let db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    let de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    let unixDb = db.getTime() - 24 * 60 * 60 * 1000;
    let unixDe = de.getTime() - 24 * 60 * 60 * 1000;
    for (let k = unixDb; k <= unixDe;) {
        //console.log((new Date(parseInt(k))).format());
        k = k + 24 * 60 * 60 * 1000;
        arr.push((new Date(parseInt(k))).format());
    }
    return arr;
}
// 比較兩個日期大小
function CompareDate(d1, d2) {
    return ((new Date(d1.replace(/-/g, "/"))) < (new Date(d2.replace(/-/g, "/"))));
}

function getPhoneType() {
    //正則,忽略大小寫
    var pattern_phone = new RegExp("iphone", "i");
    var pattern_android = new RegExp("Android", "i");
    var userAgent = navigator.userAgent.toLowerCase();
    var isAndroid = pattern_android.test(userAgent);
    var isIphone = pattern_phone.test(userAgent);
    var phoneType = "phoneType";
    if (isAndroid) {
        var zh_cnIndex = userAgent.indexOf("-");
        var spaceIndex = userAgent.indexOf("build", zh_cnIndex + 4);
        var fullResult = userAgent.substring(zh_cnIndex, spaceIndex);
        phoneType = fullResult.split(";")[1];
    } else if (isIphone) {
        //6   w=375    6plus w=414   5s w=320     5 w=320
        var wigth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (wigth > 400) {
            phoneType = "iphone6 plus";
        } else if (wigth > 370) {
            phoneType = "iphone6";
        } else if (wigth > 315) {
            phoneType = "iphone5s";
        } else {
            phoneType = "iphone 4s";
        }
    } else {
        phoneType = "您的設(shè)備太先進了";
    }
    return phoneType;
}

function isIphonex() {
    if (typeof window !== "undefined" && window) {
        return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
    }
    return false;
}

    end ···
    代碼有待優(yōu)化，日后再說吧

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105211.html

    相關(guān)文章

    • 手機端簡潔日歷控件iantoo.week()

      摘要：主要是為了避免用戶修改了手機日歷之后，獲取的本地與服務(wù)器時間不統(tǒng)一可以通過獲取服務(wù)器時間進行手動設(shè)置。日歷控件更新之后哦調(diào)用只有在調(diào)用了的時候才會被觸發(fā)非必填。對于設(shè)備已經(jīng)通過阻止冒泡事件進行控制不需要再做控制。 原文鏈接 使用 引入文件: ./build/css/iantooweek.css ./build/js/iantooweek.js 并在頁面上調(diào)用: iantoo.week(...

      Wuv1Up 評論0 收藏0

    • win10日歷交互效果(進階)

      摘要：日歷可視移動高亮范圍本篇文章在前一個初級的基礎(chǔ)上進行后續(xù)的體驗優(yōu)化目標(biāo)效果鼠標(biāo)在目標(biāo)元素內(nèi)進行移動，個塊組成的圓形高亮?xí)S之移動實現(xiàn)效果圖原圖進階實現(xiàn)圖技術(shù)點初級篇使用的漸變范圍寫法進階篇使用的漸變范圍寫法第一種寫法是不考慮高光范圍移動 win10日歷可視移動高亮范圍 本篇文章在前一個初級的基礎(chǔ)上進行后續(xù)的體驗優(yōu)化 目標(biāo)效果 鼠標(biāo)在目標(biāo)元素內(nèi)進行移動，9個塊組成的圓形高亮?xí)S之移動 實...

      skinner 評論0 收藏0

    • 一款基于移動端的日歷控件iantooDate

      摘要：已被移除過時的提醒時間的顏色。默認(rèn)當(dāng)日歷控件滑動的時候是否實時更新日歷控件的位置主要是對部分低端機型做性能處理。返回當(dāng)前的時間調(diào)用該方法關(guān)閉日歷控件。年月日時分秒星期 原文鏈接 使用 引入文件: ./build/css/iantooDate.css ./build/js/iantooDate.js 并在頁面上調(diào)用: iantoo.date() 詳細使用方法見page/iantooDat...

      liangzai_cool 評論0 收藏0

    • Android通知欄介紹與適配總結(jié)（上篇）

      摘要：修改記錄版本的通知欄消息功能上并未發(fā)生變化，右上角的縮減為了。增加了，允許可穿戴設(shè)備遠程控制通知欄消息。鎖屏狀態(tài)下，可以控制通知欄消息的隱私程度。但是谷歌規(guī)定，自定義布局展示的通知欄消息最大高度是。具體適配不正常的機型有。 此文已由作者黎星授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗。 由于歷史原因，Android在發(fā)布之初對通知欄Notification的設(shè)...

      fai1017 評論0 收藏0

    發(fā)表評論

    0條評論

    xavier

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <