您现在的位置是:网站首页> 编程资料编程资料

JavaScript仿windows计算器功能_javascript技巧_

2023-05-24 314人已围观

简介 JavaScript仿windows计算器功能_javascript技巧_

本文实例为大家分享了JavaScript仿windows计算器的具体代码,供大家参考,具体内容如下

任务要求:

名称:仿windows计算器功能:

1、实现单击按钮录入数字
2、实现基础四则运算功能,并添加必要的异常处理,例如,除数为0
3、实现小数点功能并添加异常处理:小数点只能出现一次
4、实现正负号功能
5、实现退位功能,已经是最后一位时,显示框显示为0
6、清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程

综合练习的目的:

1、将css、 html和js有效的进行技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标

成品效果图:

html页面:

计算器     
                 
                     
        
                                                                                                                                                                                                                                                                            
    

css页面:

*{     margin: 0px;     padding: 0px; } div{     width: 220px;     border-radius: 5px; } #div1{     top: 60px;     left: 100px;     position: relative;     background-image: url(image/7.png);     background-size: 108%; } input[type="button"]{     position: relative;     left: 3px;     top: 3px;     width: 40px;     height: 30px;     margin: 5px ;     border: 5px;     /*圆弧度*/     border-radius: 10px;     font-size: 20px;     /*不透明度*/     opacity:0.85; } input[type="text"]{     width: 205px;     height: 30px;     position: relative;     top: 3px;     left: 8px;     font-size: 20px;     text-align: right;     background-color: #ffffff;     /*border: 1px solid;*/     /*不延伸,用已存在的*/     box-sizing: border-box;     padding-right: 5px; } #btn2{     width: 93px; } /*伪类:产生浮动,银灰色*/ input[type="button"]:hover{     background-color: silver; }

js页面:

function init(){     var num=document.getElementById("num");     num.value=0;     num.disabled="disabled";//不能输入     // 通过标签获取input的数组,进行遍历,通过this.value输出单击当前按钮的值     // 事件添加     var objButton=document.getElementsByTagName("input");     var btn_num1;//中间变量     var fh;//加减乘除符号     for(var i=0;i可以为false,不能为true function isNumber(n){     return !isNaN(n); }

网页效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网