Calculator front-end developed with javascript
The content displayed on the calculator page is very simple, just numbers and arithmetic symbols. The code is shown below for explanation and reference:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>计算器</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#ffffcc;
font-size:12px;
font-family:"微软雅黑";
color:#666;
}
ul,ol{list-style:none;}
.cac{
width:830px;
background:#399;
margin:0 auto;
}
.cac .c_title{
font-size:16px;
color:#000;
padding:10px 0 10px 10px;
cursor:move;
}
.cac .c_show .c_txt{
width:800px;
height:42px;
font-size:34px;
color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:42px;
}
.cac .c_key ul{
border:1px solid #fff
}
.cac .c_key ul li{
border:1px solid #fff;
width:140px;
height:65px;
font-size:32px;
margin:10px;
float:left;
background:#cccc33;
line-height:65px;
cursor:pointer;
text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
<div>
<div>计算器</div>
<div>
<input type="text" value="0" onfocus="this.blur();" id="result"/> //onfocus="this.blur();"作用是使键盘无法输入
</div>
<div>
<ul>
<li onclick="command(7);">7</li> //每个按钮都要添加onclick点击事件，不然按钮不能用；
<li onclick="command(8);">8</li>
<li onclick="command(9);">9</li>
<li><-</li>
<li onclick="clearzero('j');">C</li>
<li onclick="command(4);">4</li>
<li onclick="command(5);">5</li>
<li onclick="command(6);">6</li>
<li onclick="tools('*','g');">×</li>
<li onclick="tools('/','g');">÷</li>
<li onclick="command(1);">1</li>
<li onclick="command(2);">2</li>
<li onclick="command(3);">3</li>
<li onclick="tools('+','g');">+</li>
<li onclick="tools('-','g');">-</li>
<li onclick="command(0);">0</li>
<li onclick="command(00);">00</li>
<li onclick="dot('g');">.</li>
<li onclick="tools('%','g');">%</li>
<li onclick="equal('j');">=</li>
<div></div>
</ul>
</div>
</div>
</body>
</html>This is the code for HTML and CSS.
The way to write the front-end is actually very simple. You can do it after learning HTML+CSS.
new file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>计算器</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#ffffcc;
font-size:12px;
font-family:"微软雅黑";
color:#666;
}
ul,ol{list-style:none;}
.cac{
width:830px;
background:#399;
margin:0 auto;
}
.cac .c_title{
font-size:16px;
color:#000;
padding:10px 0 10px 10px;
cursor:move;
}
.cac .c_show .c_txt{
width:800px;
height:42px;
font-size:34px;
color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:42px;
}
.cac .c_key ul{
border:1px solid #fff
}
.cac .c_key ul li{
border:1px solid #fff;
width:140px;
height:65px;
font-size:32px;
margin:10px;
float:left;
background:#cccc33;
line-height:65px;
cursor:pointer;
text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
<div>
<div>计算器</div>
<div>
<input type="text" value="0" onfocus="this.blur();" id="result"/> //onfocus="this.blur();"作用是使键盘无法输入
</div>
<div>
<ul>
<li onclick="command(7);">7</li> //每个按钮都要添加onclick点击事件，不然按钮不能用；
<li onclick="command(8);">8</li>
<li onclick="command(9);">9</li>
<li><-</li>
<li onclick="clearzero('j');">C</li>
<li onclick="command(4);">4</li>
<li onclick="command(5);">5</li>
<li onclick="command(6);">6</li>
<li onclick="tools('*','g');">×</li>
<li onclick="tools('/','g');">÷</li>
<li onclick="command(1);">1</li>
<li onclick="command(2);">2</li>
<li onclick="command(3);">3</li>
<li onclick="tools('+','g');">+</li>
<li onclick="tools('-','g');">-</li>
<li onclick="command(0);">0</li>
<li onclick="command(00);">00</li>
<li onclick="dot('g');">.</li>
<li onclick="tools('%','g');">%</li>
<li onclick="equal('j');">=</li>
<div></div>
</ul>
</div>
</div>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)