Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right.
Article directory
Preface
提示：这里可以添加本文要记录的大概内容：
提示：以下是本篇文章正文内容，下面案例可供参考
1. HTML composition
The calculator we want to make can be constructed in two ways.
1. It can be constructed using table tags and tr, th, td tags, and then use css to operate their attributes to get the calculator.
2. It can be implemented using a div container, and the header can be Think of it as five div containers, one each for red, green and blue, one for the bunker calculator, one for the result column, and the button is composed of 20 divs.
2. Basic knowledge of html, css and js
1.html
(1) Text: Set font, color, size, bold, italics, underline
(2) Picture: Set border, size, position
(3) Hyperlink: Hyperlinks can be added to pictures, text, etc.
(4) Table: Display The data composed of row and column structure can set the size, background, etc. for the table. All elements can be placed in the table. Generally, the data is taken out from the database and displayed in a table on the front end (5) Form: text box, drop-down box, radio button
, Buttons, text fields, etc., usually login interface
(6) Multimedia: video, audio, games, etc.
2.css
Layout and beautify the page elements
"." Modify the clss of the div, "#" is positioned to the id
3.javascript
An interpreted programming language that runs in the browser and is used for page interaction (front-end and back-end interaction, interaction between users)
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年轻人不要太气盛</title>
<style>
/* 设置顶部标题栏样式 */
#top {
width: 450px;
height: 50px;
margin: auto;
background-color: gray;
/* border-radius: 10px; */
/* border-top-left-radius: 10px; */
}
#top .point {
width: 20px;
height: 20px;
float: left;
margin-left: 10px;
margin-top: 15px;
border-radius: 10px;
}
#top .red {
background-color: red;
}
#top .blue {
background-color: blue;
}
#top .green {
background-color: green;
}
#calc-title {
font-size: 22px;
color: white;
float: right;
margin-top: 10px;
margin-right: 10px;
}
/* 设置结果显示栏样式 */
#result {
width: 446px;
height: 50px;
margin: auto;
text-align: right;/*文本内容右对齐*/
background-color: white;
border: solid 2px red;
font-size: 30px;
}
/* 设置按钮区域的样式 */
#button {
width: 450px;
height: 422px;
background-color: gray;
margin: auto;
}
#button div {
width: 108px;
height: 80px;
float: left;
background-color: #7fffd4;
margin: 2px;
line-height: 80px;
text-align: center;
font-size: 26px;
}
/* 使用伪类选择器设置鼠标悬停效果 */
#button div:hover {
background-color: orangered;
}
</style>
<script type="text/javascript">
//获取一个元素
function aler(){
var cal = document.getElementById("calc-title").innerHTML;
window.alert(cal);
}
document.getElementsByClassName("point");
//输入数字
function num(number){
var result = document.getElementById("result")
result.innerHTML = result.innerHTML + number
}//这里的result，不是name里面的
//输入运算符
function oper(operator){
var result = document.getElementById("result")
result.innerHTML = result.innerHTML + operator
}
//计算结果
function yunsuan(){
var result= document.getElementById("result")
var expression = result.innerHTML
result.innerHTML =eval(expression)//eval是一个可以把里面的字符串当成代码运行，eval可以把字符串转为数字然后执行
}
function doback(){
var result =document.getElementById("result")//这里只是定位到result
var len=result.innerHTML.length//这里才是取出result的值并取他的总长度
result.innerHTML =result.innerHTML.substr(0,len-1)//把result里面的值处理后重新放到result里面
}
function qingkong(){
var result = document.getElementById("result")
result.innerHTML = ""
}
</script>
</head>
<body >
<div id="top">
<div class="point red"></div>
<div class="point blue"></div>
<div class="point green"></div>
<div id="calc-title">碉堡了计算器</div>
</div>
<div id="result" name="result" ></div>
<div id="button">
<!--当被单击时触发事件-->
<!--在<script>里面写函数，下面调用函数，传参-->
<div onclick="qingkong()">AC</div>
<div>+/-</div>
<div onclick="oper('%')">%</div>
<div onclick="oper('/')">÷</div>
<div onclick="num(7)">7</div>
<div onclick="num(8)">8</div>
<div onclick="num(9)">9</div>
<div onclick="oper('*')">*</div>
<div onclick="num(4)">4</div>
<div onclick="num(5)">5</div>
<div onclick="num(6)">6</div>
<div onclick="oper('-')">-</div>
<div onclick="num(1)">1</div>
<div onclick="num(2)">2</div>
<div onclick="num(3)">3</div>
<div onclick="oper('+')">+</div>
<div onclick="num(0)">0</div>
<div onclick="doback()">删除</div>
<div onclick="oper('.')">.</div>
<div onclick="yunsuan()">=</div>
</div>
</body>
</html>
some details
xpath: Locate the tag
xml: It is the document used to describe the data.
GetElementsByClassName returns an array with s. To receive the data,
.innerHTML[0] is required
. The js code loads the element before executing
the DOM operation. The page BOM advances through the js operation browser. , retreat, history
unresolved bugs
Irregular user input causes the operation to fail to run properly