幽灵资源网 Design By www.bzswh.com
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="/UploadFiles/2021-04-02/calculator.js">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; color: #C60; 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;当按了任意运算符键后,数的输入状态变为1 var 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")""):""; //给当前值追加字符 str = str + String(num); //刷新显示 document.form1.txt.value = str; //按了任意数字键后,数的输入状态变为0 state = 0; //重置防止重复按键 avoidRepeat = true; } //第二步:确保输入的数是合法的,每个数至多只有一个小数点 function dot() { var str = String(document.form1.txt.value); //若该数前面未接运算符,则返回前值,否则为"0"; str = (state == 0)"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.substr(0,str.length-1); //若str不为"",则返回子串str,否则str="0" 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"; }关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,计算器
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。