代碼:<<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? h1{
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? border: 1px solid #0086b3;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 20px;
? ? ? ? }
? ? ? ? div{
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? li{
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ? border: 1px solid? #0086b3;
? ? ? ? }
? ? ? ? input{
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? #but{
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 20px;
? ? ? ? }
? ? </style>
</head>
<body>
<input id="txt1" type="" >
<div id="div">
? ? <h1 id="h1">+</h1>
? ? <ul id="ul">
? ? ? ? <li>+</li>
? ? ? ? <li>-</li>
? ? ? ? <li>*</li>
? ? ? ? <li>/</li>
? ? ? ? <li>%</li>
? ? </ul>
</div>
<input id="txt2" type="" >
<input id="but" type="button" value="=">
</body>
<script>
? ? var oT1=document.getElementById('txt1');
? ? var oT2=document.getElementById('txt2');
? ? var oBut=document.getElementById('but');
? ? var oH=document.getElementById('h1');
? ? var oUl=document.getElementById('ul');
? ? var aLi=oUl.getElementsByTagName('li');
? ? oH.onclick=function(){
? ? ? ? oUl.style.display='block';
? ? };
? ? for(var i=0;i<aLi.length;i++) {
? ? ? ? aLi[i].onclick = function () {
? ? ? ? ? ? oUl.style.display = 'none';
? ? ? ? ? ? oH.innerHTML = this.innerHTML;
? ? ? ? }
? ? };
? ? oBut.onclick=function () {
? ? ? ? var a=oH.innerHTML;
? ? ? ? var n1=Number(oT1.value);
? ? ? ? var n2=Number(oT2.value);
? ? ? ? if (a=='+'){
? ? ? ? ? ? alert(n1+n2);
? ? ? ? } else if(a=='-'){
? ? ? ? ? ? alert(n1-n2);
? ? ? ? } else if(a=='*'){
? ? ? ? ? ? alert(n1*n2);
? ? ? ? } else if(a=='/'){
? ? ? ? ? ? alert(n1/n2);
? ? ? ? } else{
? ? ? ? ? ? alert(n1%n2);
? ? ? ? };
? ? }
</script>
/html>
效果圖:
如果想要更好看的可以自己調整一下哦凉馆!如果對你有幫助的話記著點個贊戚哎!有沒看懂的就留個言味赃,我看到了會回復你彬伦!