文章目录
实现界面
一、代码
<!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>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 640px;
height: 800px;
margin:50px auto;
}
.jisuan{
background-color: #ccc;
width: 100%;
border-radius: 15px 15px 0 0;
}
.shuru{
width: 78%;
height: 100px;
/* border:none; */
border-radius: 15px;
outline: none;
padding-left: 20px;
font-size: 25px;
box-sizing: border-box;
margin: 20px 50px;
/* margin-bottom: 20px; */
border: none;
box-shadow: inset 6px 6px 0px #b78a92;
}
ul>li{
list-style: none;
float: left;
width: 100px;
height: 100px;
border-radius: 18px;
/* border:1px solid red; */
margin:10px;
line-height: 100px;
text-align: center;
font-size: 25px;
background-color: #fff;
box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
}
button{
float: left;
height: 50px;
width: 100px;
margin:10px;
font-size: 25px;
border: none;
border-radius: 10px;
box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
}
.top{
width: 100%;
background-color: yellow;
height: 280px;
}
.bottom{
width: 100%;
height: 200px;
background-color: pink;
border-radius: 0 0 15px 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="jisuan">
<input id="result" class="shuru" autofocus type="text">
</div>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</div>
<div class="bottom">
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button class="qingchu">清除</button>
<button >=</button>
</div>
</div>
<script>
// var btn = document.getElementById("btn");
var num = document.getElementsByTagName("input");
// btn.οnclick=function(){
获取input框中输入的值
// console.log(num[0].value+100);
// }
var lis = document.getElementsByTagName("li");
var btn = document.getElementsByTagName("button");
var result = document.getElementById("result");
var n=0;
var a = "";
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
result.value += this.innerHTML;
}
}
for(var j=0;j<btn.length;j++){
btn[j].onclick=function(){
if(this.innerHTML=="="){
if(a=="+"){
num[0].value = n + parseInt(num[0].value);
}else if(a=="-"){
num[0].value = n - parseInt(num[0].value);
}else if(a=="*"){
num[0].value = n * parseInt(num[0].value);
}else if(a=="/"){
num[0].value = n / parseInt(num[0].value);
}
}else{
//清空操作
a = this.innerHTML;
n = parseInt(num[0].value);
num[0].value = "";
}
}
}
</script>
</body>
</html>
二、笔记
1.给input设置autofocus，可以在刚进入网页的时候获取焦点
总结
只能进行两个数的计算
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
