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

資訊專欄INFORMATION COLUMN

用JS寫一個計算器(兼容手機端)

shaonbean / 796人閱讀

先看成果:
1.PC端

2.

首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數



  
    
    瑞雪的計算器
    
    
  
  
    
  • LRX
  • temmo
    9 8 7
    6 5 4
    3 2 1
    0 .
    + -
    * /

    不過現在樣式還很亂,不適合繼續寫JS所以,我開始設計樣式,先在紙上畫一畫大概的樣子............
    寫CSS代碼:

    body{
      margin: 0;
      background:#d67f5e;
    }
    header{
      text-align: center;
      background: rgb(121, 118, 138);
      margin-bottom: 50px;
      height: 40px;
      line-height: 40px;
      color: #fff;
    }
    
    header li{
      text-align: center;
      width: 10%;
      background: rgb(148, 75, 75);
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    
    }
    header li:hover{
      position: relative;
      margin-top: -34px;
      transition: 0.5s;
    }
    
    table{
      text-align: center;
    }
    .calculator_box{
      width: 450px;
      height: 420px;
      background: rgb(112, 124, 152);
      margin: 0 auto;
      padding: 15px 0;
      border: 7px double #b0b0b0;
      border-radius: 30px;
      background-image: linear-gradient(to bottom, #5b7896, #00587b 32%);
      box-shadow: 0 3px 33px 8px rgba(22, 6, 6, 0.4), inset 0 0 28px 3px #4d4952;
    
    }
    .display{
      width: 90%;
      margin: 0 auto;
      height: 70px;
      background: rgb(204, 194, 192);
      border-radius: 8px;
      background-color: #3f3c3b;
      box-shadow: 0 0 0px 1px #252829;
      font-size: 40px;
      color:#ffffff;
      text-align: right;
      line-height: 70px;
      padding-right: 10px;
    }
    .function button{
      height: 30px;
      width: 60px;
      margin: 6px;
      border-radius: 15px;
      background-color: #b58068;
      color: white;
      text-shadow: 0 0 18px #2f2402;
      box-shadow: 0 0 0px 1px #4d4c51;
    }
    .number_box,.calculator,.music{
      display: inline-block;
    }
    .content{
      width: 90%;
      margin: 0 auto;
      position: relative;
    }
    
    .function{
      margin: 10px auto;
      width: 90%;
      margin: 13 auto;
      position: relative;
    }
    .music{
      border-top: 2px double #3c94c0;
      border-bottom:2px double #3c94c0;
      width: 250px;
      height: 5px;
      border-radius: 3px;
    }
    .number_box tr,.calculator tr{
      width: inherit;
    }
    .number_box td{
      width: 98px;
      height: 60px;
      background: rgb(235, 232, 233);
      border-radius: 5px;
      box-shadow: inset 0 0 7px 3px #c9c8c8;
    }
    .number_box td:active{
        background:#6c6a6a;
        box-shadow: inset 0 0 0px 0px #c9c8c8;
        transition: 0.5s;
        color: #fff;
    }
    .calculator{
      width: 88px;
      position: relative;
      top: -47px;
      text-align: center;
      font-size: x-large;
    }
    
    .calculator td{
      width: 44px;
      height: 72px;
      border-radius: 3px;
      text-shadow: 0px 0px 10px #1f1f1f;
      background-color: rgb(185, 185, 185);
      box-shadow: inset 0 0 8px 2px #9a9a9a;
      color: #ffffff;
    }
    .calculator td:active{
      box-shadow: inset 0 0 0px 0px ;
      background-color:#9c1414;
      transition: 0.5s;
    }
    #r_out{
      width: 86px;
      height: 100px;
      border-radius: 8px;
      margin-top: 2px;
      color: aliceblue;
      background-color: #b55f5f;
      text-shadow: 0 0 12px black;
      box-shadow: inset 0 0 20px 3px #876161;
    }
    #r_out:active{
      background-color:#55595e;
      box-shadow: inset 0 0 0px 0px;
      transition: 0.5s;
    }
    footer img{
      width: 302px;
      height: 267px;
    }
    footer img:hover{
      margin-right: -150px;
      transition: 0.5s
    
    }
    
    @media only screen and (max-width: 500px) {
    
        .calculator_box{
          width: 95%;
          height: 390px;
          margin: 0 auto;
        }
        .number_box td{
          width: 70px;
          height: 57px;
        }
        .calculator{
          margin-top: -47px;
        }
        .calculator td{
          width: 44px;
          height: 66px;
        }
        .music{
          width: 165px;
        }
        .content {
          width: 81%;
          margin: 0 auto;
          position: relative;
        }
        header li{
          border-radius: 0px;
          border-bottom-right-radius: 20px;
          border-bottom-left-radius: 20px;
    
        }
    }
    
    @media only screen and (max-width: 400px){
      .calculator_box{
        width: 95%;
        height: 390px;
        margin: 0 auto;
      }
      .number_box td{
        width: 57px;
        height: 57px;
      }
      .calculator{
        margin-top: -47px;
        margin-left: 3px;
      }
      .calculator td{
        width: 44px;
        height: 66px;
      }
      .music{
        width: 154px;
      }
    
    }
    @media only screen and (max-width: 360px){
      .content {
        width: 89%;
      }
      .calculator_box{
        width: 95%;
        height: 390px;
        margin: 0 auto;
      }
      .number_box td{
        width: 64px;
        height: 57px;
      }
      .calculator{
        display: inline-block;
        margin-top: -47px;
        margin-left: 2px;
      }
      .calculator td{
        width: 44px;
        height: 66px;
      }
      .music{
        width: 154px;
      }
    }
    
    @media only screen and (max-width: 320px){
      .number_box td{
        width: 53px;
        height: 57px;
      }
    
    }
    
    用了好些個媒體查詢!手機端必須做好,因為計算器,手機用的比較多,所以響應式必須做好

    最后就是JS代碼啦~

    window.onload = function() {
         FastClick.attach(document.body);
     }
    var display;
    var result="";
    var calresults;
    display=document.getElementById("dispaly");
    function calculator(){
      result+=event.srcElement.innerText;
      // alert(result);
      dispaly.innerText=result;
    
    }
    function resultscalcaulte(){
      var display=document.getElementById("dispaly");
      calresults=eval(result);
      display.innerText=calresults;
    }
    function empty(){
      result="";
      dispaly.innerText=result;
    }
    function back(){
      if (result!="") {
        result=result.substring(0, result.length - 1);
        dispaly.innerText=result;
      }
    }
    

    然后就把計算器發給小伙伴們用吧!
    不過在手機上按鍵會有延遲~正在解決ing

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51079.html

    相關文章

    • JS一個算器兼容手機

      先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...

      printempw 評論0 收藏0
    • JS一個算器兼容手機

      先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...

      mudiyouyou 評論0 收藏0
    • 關于響應式布局,你必須要知道的

      摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

      Eirunye 評論0 收藏1
    • 關于響應式布局,你必須要知道的

      摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

      nevermind 評論0 收藏0
    • 關于響應式布局,你必須要知道的

      摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

      amuqiao 評論0 收藏0

    發表評論

    0條評論

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