先看成果:
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/112343.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設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...
閱讀 1998·2021-11-19 09:40
閱讀 1954·2021-09-28 09:36
閱讀 2287·2021-09-22 10:02
閱讀 2730·2019-08-30 14:00
閱讀 1954·2019-08-29 15:31
閱讀 2902·2019-08-29 15:11
閱讀 2913·2019-08-29 13:04
閱讀 1084·2019-08-27 10:55
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要