当前位置：文档之家 › 网页计算器制作源代码

网页计算器制作源代码

  • 格式：pdf
  • 大小：108.97 KB
  • 文档页数：3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
<head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content="">
<tr> <td align="center"><input name="f11" type="button" size="100%" value="1"
onclick="add(this.value)"></td> <td align="center"><input name="f12" type="button" size="100%" value="2"
onclick="add(this.value)"></td> <td align="center"><input name="f13" type="button" size="100%" value="3"
onclick="add(this.value)"></td> <td alignபைடு நூலகம்"center"><input name="f14" type="button" size="100%" value="+"
<tr>
<td align="center"><input name="f16" type="button" size="100%" value="0" onclick="add(this.value)"></td>
<td align="center"><input name="f17" type="button" size="100%" value="." onclick="add(this.value)"></td>
<tr> <td align="center"><input name="f21" type="button" size="100%" value="ln" class="a"
onclick="add(this.value)"></td> <td align="center"><input name="f22" type="button" size="100%" value="sqrt" class="a"
onclick="add(this.value)"></td> <td align="center"><input name="f10" type="button" size="100%" value="/"
onclick="add(this.value)"></td> </tr>
class="a" class="a" class="a" class="a" class="a"
onclick="add(this.value)"></td> <td align="center"><input name="f8" type="button" size="100%" value="6"
onclick="add(this.value)"></td> <td align="center"><input name="f9" type="button" size="100%" value="*"
{ str=str+s; document.a1.f0.value=str;
} function set(){
str=document.a1.f0.value; } function sum() { document.a1.f0.value=eval(str); } function backplace() {
<style type="text/css"> <!--
.a{ height=30px;width=50px;
} .btn2{
height=30px; width=110px; } .txt{ font-size=18px; } --> </style> <script> str=""; function add(s)
<tr> <td align="center"><input name="f1" type="button" size="100%" value="7" onclick="add(this.value)"></td> <td align="center"><input name="f2" type="button" size="100%" value="8" onclick="add(this.value)"></td> <td align="center"><input name="f3" type="button" size="100%" value="9" onclick="add(this.value)"></td> <td align="center"><input name="f4" type="button" size="100%" value="退格" onclick="backplace()"></td> <td align="center"><input name="f5" type="button" size="100%" value="清空" onclick="add(this.value)"></td> </tr>
class="a" class="a" class="a" class="a" class="a"
<tr> <td align="center"><input name="f6" type="button" size="100%" value="4"
onclick="add(this.value)"></td> <td align="center"><input name="f7" type="button" size="100%" value="5"
<td align="center"><input name="f20" type="button" size="100%" value=")" onclick="add(this.value)"></td> </tr>
class="a" class="a" class="a" class="a" class="a"

合集下载

JavaScript计算器网页版实现代码分享

JavaScript计算器网页版实现代码分享

JavaScript计算器⽹页版实现代码分享JavaScript⽹页计算器代码，该计算器是⽤DW写的！HTML篇<html<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>计算器</title><link href="style/calculator.css" rel="stylesheet" type="text/css" /><script src="JavaScript/calculator.js"></script>></head><body ><form id="form1" name="form1" method="post" action=""><table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator"><tr><td height="100" colspan="4" align="left" valign="top"><label for="txt"></label><input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"/></td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">C</td><td width="80" height="40" align="center" valign="middle" onclick="Backspace();">←</td><td width="80" height="40" align="center" valign="middle" onclick="sign();">±</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="add();">＋</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(7);">7</td><td width="80" height="40" align="center" valign="middle" onclick="command(8);">8</td><td width="80" height="40" align="center" valign="middle" onclick="command(9);">9</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="subtract();">－</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(4);">4</td><td width="80" height="40" align="center" valign="middle" onclick="command(5);">5</td><td width="80" height="40" align="center" valign="middle" onclick="command(6);">6</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="multiply();">×</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(1);">1</td><td width="80" height="40" align="center" valign="middle" onclick="command(2);">2</td><td width="80" height="40" align="center" valign="middle" onclick="command(3);">3</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="divide();">÷</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(0);">0</td><td width="80" height="40" align="center" valign="middle" onclick="dot();">▪</td><td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" onclick="equal();">＝</td></tr></table><p> </p><p> </p></form></body></html>CSS篇@charset "utf-8";/* CSS Document */.trb {font-family: Georgia, "Times New Roman", Times, serif;font-size: 24px;color: #FFF;background-color: #333;text-align: center;border: 1px solid #999;}.operator {background-color: #333;font-size: 18px;font-family: Verdana, Geneva, sans-serif;}td:hover{font-size: 28px;cursor:pointer;}.txt {height: 100px;width: 320px;background-color: #333;text-align: left;vertical-align: bottom;color: #FFF;font-size: 30px;}JavaScript篇//实现计算器功能//结果var result = 0;//显⽰框中的数（默认为“0”）var screenNum = "0";//数的初始输⼊状态，默认为0；当按了任意运算符键后，数的输⼊状态变为1var state = 0;//防⽌重复按运算符键var avoidRepeat = true;//运算符键（默认为0--等于号）var operator = 0;//第⼀步：获取按键值，并显⽰在显⽰框中function command(num) {//获取显⽰框的值var str = String(document.form1.txt.value);//对该值进⾏判断，如果该值不为"0"，且输⼊状态0，则返回前者，否则为""(双重三⽬运算) //两个判断条件：1、显⽰框中值是否为"0", 2、数的输⼊状态str = (str != "0")?((state == 0)?str:""):"";//给当前值追加字符str = str + String(num);//刷新显⽰document.form1.txt.value = str;//按了任意数字键后，数的输⼊状态变为0state = 0;//重置防⽌重复按键avoidRepeat = true;}//第⼆步：确保输⼊的数是合法的，每个数⾄多只有⼀个⼩数点function dot() {var str = String(document.form1.txt.value);//若该数前⾯未接运算符，则返回前值，否则为"0"；str = (state == 0)?str:"0";//Java⾥String有length()⽅法，⽽JS⾥String有length属性for(i=0;i<=str.length;i++) {//substr()获取下标从i开始，个数为1个的⼦串if(str.substr(i,1)==".") {//当存在⼩数点时，则程序终⽌return;}}//若⽆⼩数点，则在该数后⾯加上str = str+".";//刷新显⽰document.form1.txt.value = str;//恢复数的初始输⼊状态state = 0;}//第三步：处理退格键function Backspace() {var str= String(document.form1.txt.value);//若显⽰框中数不等于"0",则返回str，否则返回""str = (str != "0")?str:"";str = str.substr(0,str.length-1);//若str不为"",则返回⼦串str，否则str="0" str = (str != "")?str:"0";//刷新显⽰document.form1.txt.value = str;}//第四步：删除所有function deleteAll() {//显⽰框设为"0"document.form1.txt.value = "0";//恢复数的初始输⼊状态state = 0;//恢复运算符键，默认为0--等于号operator = 0;}//第五步：加法function add() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//更改运算符键，1--加号operator = 1;}//第六步：减法function subtract() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//2--减号operator = 2;}//第七步：乘法function multiply() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//3--乘号operator = 3;}//第⼋步：除法function divide() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//4--除号operator = 4;}//第九步：正负号function sign() {//5--正负号operator = 5;//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//0--等于号operator = 0;//正负号可以连续按avoidRepeat = true;}//第⼗步：等于function equal() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//0--等于号operator = 0;}//第⼗⼀步：计算function calculate() {//获取显⽰框中的值screenNum = Number(document.form1.txt.value);if(avoidRepeat) {switch(operator){case 1:result = result + screenNum;document.form1.txt.value = result;break;case 2:result = result - screenNum;document.form1.txt.value = result;break;case 3:result = result * screenNum;document.form1.txt.value = result;break;case 4:if(screenNum == 0){//设置显⽰框的值document.getElementById("txt").value="除数不能为0";//3s后，执⾏清屏函数setTimeout(clearScreen,3000);}else{result = result/screenNum;document.form1.txt.value = result;}break;case 5:result = (-1)*screenNum;document.form1.txt.value = result;break;case 0:result = screenNum;document.form1.txt.value = result;break;}//当按了运算符键后，不能再按avoidRepeat = false;}}//第⼗⼆步：清屏函数function clearScreen() {document.getElementById("txt").value = "0";}关于计算器的精彩⽂章请查看，更多精彩等你来发现！以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

基于html+css+js实现简易计算器代码实例

基于html+css+js实现简易计算器代码实例

基于html+css+js实现简易计算器代码实例使⽤html+css+js实现简易计算器，效果图如下：html代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>calculator</title><link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" ><script type="text/javascript" src="contain.js"></script><title>Document</title></head><body><div class="calculator"><form name="calculator"><input type="text" id="display" value=""><br><input type="button" class="btn number txt" value="TYNAM"><input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();"><input type="button" class="btn number" value="<-" onclick="del();"><input type="button" class="btn operator" value="/" onclick="get(this.value);"><br><input type="button" class="btn number" value="7" onclick="get(this.value);"><input type="button" class="btn number" value="8" onclick="get(this.value);"><input type="button" class="btn number" value="9" onclick="get(this.value);"><input type="button" class="btn operator" value="*" onclick="get(this.value);"><br><input type="button" class="btn number" value="4" onclick="get(this.value);"><input type="button" class="btn number" value="5" onclick="get(this.value);"><input type="button" class="btn number" value="6" onclick="get(this.value);"><input type="button" class="btn operator" value="+" onclick="get(this.value);"><br><input type="button" class="btn number" value="1" onclick="get(this.value);"><input type="button" class="btn number" value="2" onclick="get(this.value);"><input type="button" class="btn number" value="3" onclick="get(this.value);"><input type="button" class="btn operator" value="-" onclick="get(this.value);"><br><input type="button" class="btn number" value="0" onclick="get(this.value);"><input type="button" class="btn number" value="." onclick="get(this.value);"><input type="button" class="btn operator equal" value="=" onclick="calculates();"></form></div></body></html>CSS代码如下：border: none;font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;}.calculator {background-color: #fff;height: 600px;margin: 50px auto;width: 600px;}form {background-color: rgb(75, 70, 71);padding: 5px 1px auto;width: 245px;}.btn {outline: none;cursor: pointer;font-size: 20px;height: 45px;margin: 5px 0 5px 10px;width: 45px;}.btn:first-child {margin: 5px 0 5px 10px;}#display {outline: none;background-color: #dededc;color: rgb(75, 70, 71);font-size: 40px;height: 47px;text-align: right;width: 224px;margin: 10px 10px auto;}.number {background-color: rgb(143, 140, 140);color: #dededc;}.operator {background-color: rgb(239, 141, 49);color: #ffffff;}.equal{width: 105px;}.txt{font-size:12px;background: none;}JS代码如下：/* display clear */function cleardisplay() {document.getElementById("display").value = "";}/* del */function del() {var numb = "";numb = document.getElementById("display").value;for(i=0;i<numb.length;i++){document.getElementById("display").value = numb.substring(0,numb.length-1); if(numb == '')document.getElementById("display").value = '';}}}/* recebe os valores */function get(value) {document.getElementById("display").value += value;}/* calcula */function calculates() {var result = 0;result = document.getElementById("display").value;document.getElementById("display").value = "";document.getElementById("display").value = eval(result);};以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

简单的网页计算器代码

简单的网页计算器代码

</td>
</tr>
</table>
</form>
</body>
</html>
b = document.getElementById("txtNum2").value;
r=a-b;
document.getElementById("txtResult").value=r;
}
function onMul()
{ቤተ መጻሕፍቲ ባይዱ
var a;
var b;
var r;
a = document.getElementById("txtNum1").value;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" >
<head>
<title>计算器</title>
<script language="ecmascript"type="text/javascript">
function onAdd()
{
var a;
var b;
var r;
a = parseInt(document.getElementById("txtNum1").value);
b = document.getElementById("txtNum2").value;
php编程实现简单的网页版计算器功能

php编程实现简单的网页版计算器功能

php编程实现简单的网页版计算器功能php编程实现简单的网页版计算器功能,涉及php简单表单*作与数值运算相关实现技巧,需要的朋友可以参考下。

本文实例讲述了php编程实现简单的网页版计算器功能。

分享给大家供大家参考，具体如下：如何通过php代码来实现一个网页版的计算器的简单功能？下面就是通过php基础知识来做的网页版计算器，功能只有“加减剩除求余”，其他的一些计算功能可扩展。

实现简单计算器的具体php代码如下（这是php文件jsq.php的全部代码）：<html><head><title>这是一个网页版的简单计算器</title><metahttp-equiv="Content-Type"content="text/html;chaset=utf-8"></head><?php$num1=true;$num2=true;$numa=true;$numb=true;$message="";if(isset($_GET["sub"])){if($_GET["num1"]==""){$num1=false;$message.="第一个数不能为空";}if($_GET["num2"]==""){$num1=false;$message.="第二个数不能为空";}if(!is_numeric($_GET["num1"])){$numa=false;$message.="第一个数应该是数字";}if(!is_numeric($_GET["num2"])){$numb=false;$message.="第二个数应该是数字";}if($num1&&$num2&&$numa&&$numb){ $sum=0;switch($_GET["ysf"]){case"+":$sum=$_GET["num1"]+$_GET["num2"]; break;case"-":$sum=$_GET["num1"]-$_GET["num2"]; break;case"x":$sum=$_GET["num1"]*$_GET["num2"]; break;case"/":$sum=$_GET["num1"]/$_GET["num2"]; break;case"%":$sum=$_GET["num1"]%$_GET["num2"]; break;}}}><body><tablealign="center"border="1"width="500"><caption><h1>网页计算器</h1></caption><formaction="jsq.php"><tr><td><inputtype="text"size="5"name="num1"value="<?phpech o$_GET["num1"]?>"></td><td><selectname="ysf"><optionvalue="+"<?phpif($_GET["ysf"]=="+")echo"selected "?>>+</option><optionvalue="-"<?phpif($_GET["ysf"]=="-")echo"selected"?>>-</option><optionvalue="x"<?phpecho$_GET["ysf"]=="x"?"selected":" "?>>x</option><optionvalue="/"<?phpecho$_GET["ysf"]=="/"?"selected":" "?>>/</option><optionvalue="%"<?phpecho$_GET["ysf"]=="%"?"selected" :""?>>%</option></select></td><td><inputtype="text"size="5"name="num2"value="<?phpech o$_GET["num2"]?>"></td><td><inputtype="submit"name="sub"value="计算"></td><?phpif(isset($_GET["sub"])){echo'<tr><tdcolspan="4">';if($num1&&$num2&&$numa&&$numb){echo"结果：".$_GET["num1"]."".$_GET["ysf"]."".$_GET["num2"]."=".$sum;}else{echo$message;}echo'</td></tr>';}></form></table></body></html>。