手寫移動端數字鍵台

來源:互聯網
上載者:User

標籤:手寫   editable   middle   listener   foreach   oar   ali   set   slice   

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">    <title>自訂鍵盤輸入</title></head><body><style>        .box{            width: 200px;            height: 40px;            border: 1px solid #dedede;            padding-left: 5px;            line-height: 40px;            overflow: hidden;        }</style>        <div class="box" contenteditable="true" ></div><style>    body{        margin: 0;    }    .keyboard{        width: 100%;        height:12rem;        position: fixed;        bottom: 0;    }    .keyboard .number{        width: 75%;        float: left;        height: 100%;        box-sizing: border-box;    }    .keyboard .fuc{        box-sizing: border-box;        width: 25%;        height: 100%;        float: left;        border: 1px solid #666;        border-left: none;        text-align: center;        line-height: ;    }    .keyboard .fuc .delinput{        display: block;        height: 25%;        width: 100%;        border-bottom: 1px solid #666;        line-height: 3rem;        box-sizing: border-box;    }    .keyboard .fuc .completeinput{        line-height: 9rem;        display: block;    }    .keyboard   .line{        display: block;        width: 100%;        height: 25%;    }    .keyboard  .line  span{        display: table-cell;        vertical-align: middle;        width:33.3333333%;        height: 100%;        border-top: 1px solid #666;        border-left: 1px solid #666;        text-align: center;        box-sizing: border-box;        float: left;        font-size: 20px;        font-weight: bold;        line-height: 3rem;    }    .keyboard  .line  span:nth-child(3){        border-right: 1px solid #666;    }    .keyboard  .line:last-child  span{        border-bottom: 1px solid #666;    }    .keyboard  span:active{            background-color: #3e50b4;    }</style>        <div class="keyboard">            <div class="number">                <div  class="line">                        <span>1</span>                        <span>2</span>                        <span>3</span>                </div>                <div  class="line">                    <span>4</span>                    <span>5</span>                    <span>6</span>                </div>                <div  class="line">                    <span>7</span>                    <span>8</span>                    <span>9</span>                </div>            <div  class="line">                <span>0</span>                <span>.</span>                <span></span>            </div>        </div>            <div class="fuc">                   <span class="delinput">刪除</span>                <span class="completeinput">完成</span>            </div>        </div><script>           var input =  document.getElementsByClassName("box");           keyboard(input,callback);           //數字鍵台邏輯           var oldk=0;            function  keyboard(el,calback){                elem = el[0] ;                var  oldv = el.innerHTML;                var arr = document.querySelector(".keyboard").getElementsByTagName("span");                arr = Array.prototype.slice.call(arr);                  arr.forEach(function(element,index){                       element.addEventListener("click",function (e) {                           if(this.innerHTML == ".") {                               if (oldk == 0) {                                   oldk = 1;                               } else if(oldk ==  1) {                                    return ;                               }                           }else{                               oldk = 0;                           }                            if(this.innerHTML == "完成"){                                    if(elem.innerHTML == ‘‘ ||  elem.innerHTML == undefined){                                        console.log("輸入為空白!")                                    }else{                                        console.log("輸入完成~",elem.innerHTML);                                        callback(elem.innerHTML);                                    }                            }else if(this.innerHTML == "刪除"){                                    if(elem.innerHTML == ‘‘ || elem.innerHTML == undefined) {                                    }else{                                        elem.innerHTML = elem.innerHTML.slice(0,elem.innerHTML.length-1);                                    }                            }else{                                    if(oldv == undefined){                                        elem.innerHTML =  this.innerHTML;                                    }else{                                        elem.innerHTML =compute(elem.innerHTML +  this.innerHTML);                                    }                                    oldv = elem.innerHTML;                            }                       })                  })            }            function compute(number){                    var tem = number.toString().split(".");                    if(tem.length == 1 || (tem.length > 2 &&tem[1]==‘‘  )){                        return tem[0];                    } else if(tem.length==2 && tem[1] ==‘‘ && tem[0] == ‘‘){                             return "0.";                    } else if( tem.length==2 && tem[1] ==‘‘ && tem[0]!==‘‘ ){                            return tem[0]+".";                    } else if(tem.length >=2 &&tem[1]!==‘‘){                        return tem[0]+"."+  (tem[1].length>=2?tem[1].substring(0,2) : tem[1]);                    }            }           //數字鍵台邏輯            function callback(value){            //    輸入完成後的操作                alert("輸入的資料是:"+value);            }</script></body></html>

  

手寫移動端數字鍵台

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.