web学习之js写计算器

.btn {

outline: none;

font-size: 20px;

height: 45px;

margin: 5px 0 5px 10px;

width: 45px;

}

.btn:first-child {

margin: 5px 0 5px 10px;

}

#display {

outline: none;

background-color: white;

color: black;

font-size: 20px;

height: 47px;

text-align: right;

width: 165px;

padding-right: 10px;

margin-left: 0px;

}

.btn,

#display,

form {

border-radius: 25px;

}

.number {

background-color: #f1cd00;

box-shadow: 0 5px #76ee05d0;

color: #131312;

}

.number:active {

box-shadow: 0 2px #5f6680;

-webkit-transform: translateY(2px);

-ms-transform: translateY(2px);

-moz-tranform: translateY(2px);

transform: translateY(2px);

}

.number:hover {

background-color: rgb(114, 119, 139, 0.4);

box-shadow: 0 5px #5f6680;

color: #dededc;

}

.operator {

background-color: #6df811;

box-shadow: 0 5px #0b3cf0;

}

.operator:hover {

background-color: rgba(233, 233, 17, 0.6);

color: #0937f0;

}

.other {

background-color: rgba(240, 10, 201, 0.7);

box-shadow: 0 5px #02f0f0;

}

.other:hover {

background-color: rgba(8, 190, 245, 0.4);

color: #dededc;

}

.button_clear {

margin-left: 10px;

padding: 5px;

outline: none;

border-radius: 25px;

background-color: rgb(248, 247, 247);

color: rgb(0, 10, 10);

font-size: 16px;

font-style: strong;

width: 80px;

height: 28px;

}

.button_clear:active {

background-color: rgb(10, 252, 10);

box-shadow: 0 5px #666;

transform: translateY(2px);

}

.button_back {

margin-left: 58px;

padding: 5px;

outline: none;

border-radius: 25px;

background-color: rgb(250, 245, 243);

color: rgb(0, 0, 0);

font-size: 16px;

font-style: strong;

width: 80px;

height: 28px;

}

.button_back:active {

background-color: rgb(10, 247, 10);

box-shadow: 0 5px #666;

transform: translateY(2px);

}

.off_on {

margin-left: 20px;

padding: 5px;

outline: none;

border-radius: 25px;

background-color: rgb(250, 245, 243);

color: rgb(17, 18, 19);

font-size: 16px;

font-style: strong;

width: 60px;

height: 28px;

}

.off_on:active {

background-color: rgb(7, 252, 39);

box-shadow: 0 5px #666;

transform: translateY(2px);

}

p,

h1 {

font-family: 楷体;

}

js部分：

var power = 1;

// 1 是开机 -1是关机

function off() {//一开始就运行—》 关机

power = -power;

if (power == -1) {

document.getElementById(“display”).value = “”;

} else {

welcome();

}

};

function clearout() {

if (power == -1) {

document.getElementById(“display”).value = “”;

} else {

document.getElementById(“display”).value = “”;

document.getElementById(“display”).focus();

}

};

function welcome() {

document.getElementById(“display”).value = “欢迎使用PJ牌”;

setTimeout(welcome_end, 1000);

};

function welcome_end() {

document.getElementById(“display”).value = “”;

document.getElementById(“display”).focus();

};

function get(value) {

if (power == 1) {

document.getElementById(“display”).value += value;

} else {

document.getElementById(“display”).value = “”;

}

};

function back() {

if (power == 1) {

var now_result = document.getElementById(“display”);

document.getElementById(“display”).value = now_result.value.substring(0, now_result.value.length - 1);

} else {

document.getElementById(“display”).value = “”;

}

};

function isInteger(obj){

return typeof obj === ‘number’ && obj%1 === 0; //是整数，则返回true，否则返回false

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
akW01u-1715713373987)]

[外链图片转存中…(img-QdAbncky-1715713373988)]

[外链图片转存中…(img-pWbfs8Wj-1715713373988)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！