9 | 8 | 7 |
6 | 5 | 4 |
3 | 2 | 1 |
0 | . |
+ | - |
* | / |
先看成果:
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/84484.html
先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...
先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...
摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...
摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...
摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...
閱讀 3450·2019-08-30 15:55
閱讀 2050·2019-08-30 15:44
閱讀 1453·2019-08-30 12:47
閱讀 741·2019-08-30 11:05
閱讀 1630·2019-08-30 10:54
閱讀 656·2019-08-29 16:07
閱讀 3568·2019-08-29 14:17
閱讀 2223·2019-08-23 18:31