本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下
功能:
1、实现单击数字按钮输入数字
2、实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零
3、实现小数点添加功能,并添加异常处理,小数点只能出现一次
4、实现正负号功能
5、实现回退功能,已经是最后一位时,显示框显示为零
6、清屏功能
使用的知识点:
1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程
综合练习目的:
1、将CSS、HTML和JS有效的惊醒技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标
页面效果:
源代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="stylesheet" type="text/css" href="demo.css" > <script type="text/javascript" src="/UploadFiles/2021-04-02/demo.js">css
*{ margin: 0; padding: 0; } /*内外边距*/ input{ width: 160px; } /*宽*/ form{ width: 200px; height: 300px; margin: 100px auto 0; } /*宽高;外边距*/ #text{ text-align: right; padding-right: 10px; } /*文字靠右*/ .btn:hover{ background: #ccc; border: 2px solid #ccc; } /*背景颜色,边框*/ .btn{ width: 40px; height: 25px; margin-top: 5px; } /*宽高,上边距*/js
window.onload = function(){ var t = document.getElementById('text');//数字文本 var num = { //数字0-9 num1:document.getElementById('num1'), num2:document.getElementById('num2'), num3:document.getElementById('num3'), num4:document.getElementById('num4'), num5:document.getElementById('num5'), num6:document.getElementById('num6'), num7:document.getElementById('num7'), num8:document.getElementById('num8'), num9:document.getElementById('num9'), num0:document.getElementById('num0') }; var symbol = { divide:document.getElementById('divide'),//除 multiply:document.getElementById('multiply'),//乘 subtract:document.getElementById('subtract'),//减 add:document.getElementById('add'),//加 reset:document.getElementById('reset'),//归零 back:document.getElementById('back'),//回退 plus:document.getElementById('plus'),//正负号 equal:document.getElementById('equal'),//等于号 point:document.getElementById('point'),//小数点 ddd:document.getElementById('ddd')//跳百度 }; var n = [];//储存符号 var sum = '';//前面储存输入的数字 var a = false; for(var i in symbol){ symbol[i].onclick = function(){ switch(this.value){ case '.' : if(text.value!== "0" && this.value=="."){ //文本框里数字不为零,并且输入小数点 if(text.value.indexOf(".")!==-1){ // 处理点重复的问题;文本框里面有小数点 text.value = text.value; } else { text.value += this.value; } } else { text.value += this.value; } break; case '+': if(n != '+'){ n = this.value; //储存符号 sum = t.value; //储存输入的数字 t.value = '0'; //清0 } break; case '-': if(n != '-'){ n = this.value; sum = t.value; t.value = '0'; } break; case '*': if(n != '*'){ n = this.value; sum = t.value; t.value = '0'; } break; case '/': if(n != '/'){ n = this.value; sum = t.value; t.value = '0'; } break; case '=': switch(n){ case '+': t.value = parseFloat(sum) + parseFloat(t.value); //输出结果 n = ''; //符号清空 break; case '-': t.value = parseFloat(sum) - parseFloat(t.value); n = ''; break; case '*': t.value = parseFloat(sum) * parseFloat(t.value); n = ''; break; case '/': if(parseFloat(t.value) == 0){ alert('除数不能为0'); t.value=0; } else { t.value = parseFloat(sum) / parseFloat(t.value); n = ''; } break; } break; case '←' : //长度减一 if (t.value.length>1) { t.value = t.value.substr(0,t.value.length-1); } else { t.value = '0'; } break; case 'C' : //清0 t.value = 0; break; case '+/-' : //点击一次*-1 t.value = t.value * -1; break; case 'd': window.open('http://www.baidu.com'); break; } } } //封装,点击数字输入到文本域中 function number(numx){ if (t.value == '0') { t.value = numx; } else { t.value += numx; } } //输入数字 num.num1.onclick = function(){ number(this.value); } num.num2.onclick = function(){ number(this.value); } num.num3.onclick = function(){ number(this.value); } num.num4.onclick = function(){ number(this.value); } num.num5.onclick = function(){ number(this.value); } num.num6.onclick = function(){ number(this.value); } num.num7.onclick = function(){ number(this.value); } num.num8.onclick = function(){ number(this.value); } num.num9.onclick = function(){ number(this.value); } num.num0.onclick = function(){ number(this.value); } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 国风大师纯音系列《民乐琴王童丽-与古筝的约会》1CD[MP3][166.4MB]
- 刘美君.1993-被你纵坏【SONY】【WAV+CUE】
- 黄鹤翔.1998-爱的咏叹调【中唱】【WAV+CUE】
- 薰妮.1983-梦+淡(2000年永恒真存双碟版)【永恒】【WAV+CUE】
- 方伊琪.1976-时光消逝(2015复黑限量版)【风行】【WAV+CUE】
- 群星.1990-宝丽金影视金曲巡礼【宝丽金】【WAV+CUE】
- 林俊杰.2014-新地球(精装预售“光”版)【华纳】【WAV+CUE】
- 国风大师纯音系列《王珣学院派独特的空灵古筝》1CD[FLAC][888MB]
- 国风大师纯音系列《古筝演奏家 付娜》1CD[FLAC][1.2GB]
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】