网页设计模板下载

2020-12-29 05:59 admin

网页设计模板下载:Web网页版简易计算器




HTML代码如下

 !DOCTYPE html 
 html 
 head 
 meta charset utf-8 / 
 title 网页版计算器 /title 
 link href css/new_file.css rel stylesheet type text/css / 
 script type text/javascript src js/new_file.js /script 
 /head 
 body 
 div id calculator 
 div id head h3 网页版简单计算器 /h3 /div 
 div id show align center input type text id text /div 
 div id cuttom 
 table align center 
 td input type button value 7 onclick display(7) /td 
 td input type button value 8 onclick display(8) /td 
 td input type button value 9 onclick display(9) /td 
 td input type button value onclick display( ) /td 
 td input type button value - onclick display( - ) /td 
 /tr 
 td input type button value 4 onclick display(4) /td 
 td input type button value 5 onclick display(5) /td 
 td input type button value 6 onclick display(6) /td 
 td input type button value * onclick display( * ) /td 
 td input type button value / onclick display( / ) /td 
 /tr 
 td input type button value 1 onclick display(1) /td 
 td input type button value 2 onclick display(2) /td 
 td input type button value 3 onclick display(3) /td 
 td input type button value ( onclick display( ( ) /td 
 td input type button value ) onclick display( ) ) /td 
 /tr 
 td input type button value . onclick display( . ) /td 
 td input type button value 0 onclick display(0) /td 
 td input type button value ← onclick back() /td 
 td input type button value c onclick reset() /td 
 td input type button value onclick equals() /td 
 /tr 
 /table 
 /div 
 /div 
 /body 
 /html 

CSS代码如下

body{background:#CDC673;}
h3{font-family:微软雅黑;font-size: 35px;text-align: center;}
#show input{width:511px;height:60px;font-size:30px;}
#cuttom input{width: 100px;height: 70px;font-size: 28px;}
#cuttom input:hover{background: lightgray;}

JS代码如下

function $(id){return document.getElementById(id);}
var str;
var result;
function display(str0) //显示到文本框
 str document.getElementById( text );
 str.value str.value str0;
function equals() //等于
 str document.getElementById( text );
 result eval(str.value);
 str.value result;
function back() //退格
 str document.getElementById( text );
 str.value str.value.substring(0,str.value.length-1);
function reset() //清除
 str document.getElementById( text );
 str.value ;


运行界面如下