JS网页计算器

JS网页计算器

2021 年 07 月 23 日

2453 次浏览

2542字数

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;metacharset=&quot;utf-8&quot;&gt;
 &lt;title&gt;无标题文档&lt;/title&gt;
 &lt;style&gt;
 *{
 margin:0;
 padding:0
 }
 .cont{
 width:300px;
 height:500px;
 border:2px#000solid;
 padding:20px;
 margin:0auto
 }
 #jieguo{
 width:300px;
 height:40px;
 border:2px#000solid;
 margin-bottom:20px;
 font-size:24px
 }
 #btninput{
 width:75px;
 height:35px;
 margin:5px9px;
 border-radius:3px;
 border:1px#333solid
 }
 #btn{
 margin-bottom:20px
 }
 #qingchu,
 #deng{
 width:100px;
 height:35px;
 margin:5px7px;
 background:#B5EFEA;
 border:1px#173DB7solid;
 border-radius:3px
 }
 &lt;/style&gt;
 &lt;script&gt;
 window.onload=function(){
 varjieguo=document.getElementById('jieguo')
 varinput=document.getElementById('btn').getElementsByTagName('input')//群组
 varqingchu=document.getElementById('qingchu')
 vardeng=document.getElementById('deng')
 for(vari=0;i&lt;input.length;i++){
 input[i].onclick=function(){
 jieguo.value=jieguo.value+this.value
 }
 }
 deng.onclick=function(){
 jieguo.value=eval(jieguo.value)
 }
 qingchu.onclick=function(){
 jieguo.value=''
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;divclass=&quot;cont&quot;&gt;
 &lt;divclass=&quot;top&quot;&gt;
 &lt;input type=&quot;text&quot;id=&quot;jieguo&quot;&gt;
 &lt;/div&gt;
 &lt;divid=&quot;btn&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;0&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;1&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;2&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;3&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;4&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;5&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;6&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;7&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;8&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;9&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;+&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;-&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;*&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;/&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;(&quot;&gt;
 &lt;input type=&quot;button&quot;value=&quot;)&quot;&gt;
 &lt;/div&gt;
 &lt;input type=&quot;button&quot;id=&quot;qingchu&quot;value=&quot;清除&quot;&gt;
 &lt;input type=&quot;button&quot;id=&quot;deng&quot;value=&quot;=&quot;&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre><p>转载请注明原文地址<a href="https://www.xxhzm.cn/index.php/archives/9/"><a href="https://www.xxhzm.cn/index.php/archives/9/">https://www.xxhzm.cn/index.php/archives/9/</a></a></p>