利用function函数实现计算机的功能,代码如下:
css代码
*{
padding: 0;
margin: 0;
}
.wrapper{
width: 300px;
height: 400px;
background-color: gray;
position: relative;
text-align: center;
}
input{
width: 200px;
height: 50px;
margin: 0 auto;
line-height: 50px;
}
.inner{
width: 290px;
height:80%;
background-color: #00B22C;
position: absolute;
left: 5px;
bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
/* text-align: center; */
}
.inner button{
display: block;
width: 28%;
height: 40px;
background-color: #EDECEA;
margin-top: 10px;
line-height: 40px;
border: 0;
font-size: 20px;
}
HTML代码
<div class="wrapper">
<form action="#">
<input type="text" id="first" value="" >
<div class="inner">
<button onclick="cal('1')">1</button>
<button onclick="cal('2')">2</button>
<button onclick="cal('3')">3</button>
<button onclick="cal('4')">4</button>
<button onclick="cal('5')">5</button>
<button onclick="cal('6')">6</button>
<button onclick="cal('7')">7</button>
<button onclick="cal('8')">8</button>
<button onclick="cal('9')">9</button>
<button onclick="cal('+')">+</button>
<button onclick="cal('0')">0</button>
<button onclick="cal('-')">-</button>
<button onclick="cal('*')">*</button>
<button onclick="cal('/')">/</button>
<button onclick="jieguo('=')">=</button>
<input type="reset" value="AC">
</div>
</form>
</div>
js代码
<script>
var _first=document.getElementById("first");
function cal(param){
_first.value= _first.value+param;
}
function jieguo(){
_first.value=eval(_first.value);
}
</script>
要实现input框显示+ - * / 得保留这几个+ - */的字符串。
实现聊天框:
<script>
var _first=document.getElementById("first");
var _second=document.getElementById("second");
function xinxi(){
var val=_second.value;
_first.innerHTML=`${_first.innerHTML}${val}<br>`;
}
function reset(){
_second.value="";
}
</script>
这个要实现换行,就是得加上<br>,让_first.innerHTML=_first.innerHTML+val+<br>;才能保留之前的聊天内容。每次发送完信息后,输入框自动清空,就得重新对value值赋空值。