js制作计算机和简易聊天框

利用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值赋空值。