划重点！！！

（兄弟们只需要建一个test的html文件、file的CSS文件和test1的js文件，将对应的代码粘贴进去可以运行啦~）

一、效果截图：

功能：

1、实现简单的四则运算。 2、包含正负号操作。

3、M按钮实现跳转到一个网页。 4、可以使用小数运算。

二、代码实现：

1、HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title><link rel="stylesheet" type="text/css" href="file.css"><script type="text/javascript" src="test1.js"></script>
</head>
<body onload="init()"><div class="div1"><div class="div2"><input type="text" id="Text1" class="text1" ></div><div class="div3"><input type="button" value="C" class=""><input type="button" value="<-" class=""><input type="button" value="+/-" class=""><input type="button" value="/" class=""><input type="button" value="1" class=""><input type="button" value="2" class=""><input type="button" value="3" class=""><input type="button" value="*" class=""><input type="button" value="4" class=""><input type="button" value="5" class=""><input type="button" value="6" class=""><input type="button" value="-" class=""><input type="button" value="7" class=""><input type="button" value="8" class=""><input type="button" value="9" class=""><input type="button" value="+" class=""><input type="button" value="0" class=""><input type="button" value="." class=""><input type="button" value="=" class=""><input type="button" value="m" id="baidu"></div></div>
</body>
</html>

2、CSS样式：

.div1{width: 180px;height: 200px;top: 100px;left: 100px;position: absolute;background: url("../img/img_1.png");
}
.div2{width: 140px;position: relative;left: 15px;top: 42px;
}
.text1{width: 140px;text-align: right;/*将文本框内的文字右对齐*/background-color: white;/*默认的不可选中版的文本框是灰色的，这是要将其设置为白色*/
}
.div3{width: 160px;height: 116px;position: relative;left: 15px;top: 50px;
}
/*属性选择器：将所有该类型的标签都选中一起设置*/
input[type="button"]{width: 30px;margin-right: 5px;border-radius: 10px;background: goldenrod;
}
/*使用伪类选择器改变悬浮时的颜色变化*/
input[type="button"]:hover{/*让颜色变化的是background-color，而不是单纯的color*/background-color: cornflowerblue;border: 2px solid;
}

3、JavaScript部分：

/*将初始化的内容放在js中，将样式的内容
放在css中，html中只写class、value等基本html内容*/
function init(){initLabel();fun();Link();
}
/*将文本框内容进行初始化*/
function initLabel(){let value=document.getElementById("Text1");value.value=0;value.disabled="disabled";
}
//按钮添加功能
function fun(){let getText=document.getElementById("Text1");let nums=document.getElementsByTagName("input");let numFirst,symbol;for (let i=0;i<nums.length;i++){nums[i].onclick=function (){//isNaN如果是数字返回false，不是数字返回trueif (!isNaN(this.value)){if (isNull(getText.value))getText.value=this.value;elsegetText.value=getText.value+this.value;}else{/*非数字执行的操作*/let button_info=this.value;switch (button_info){case "C":getText.value=0;break;case "<-":getText.value=myBack(getText.value);break;case "+/-"://单击一次就变为符号，再单机一次就变为正号getText.value=mySign(getText.value);break;case "/":numFirst=getText.value*1;getText.value=0;symbol="/"break;case "."://小数点只能点击一次getText.value=point_fun(getText.value);break;case "*":numFirst=getText.value*1;getText.value=0;symbol="*"break;case "-":numFirst=getText.value*1;getText.value=0;symbol="-"break;case "+":/*清除文本框默认前面的0,并获取里面的值供计算使用*/numFirst=getText.value*1;getText.value=0;symbol="+"break;case "=":switch (symbol){//下面不能用parseInt()将字符串转化为数字，因为如果有小数就会将小数自动转化为整数//将字符串转化为数字方法：//1、值*1实现//2、parseInt（）实现//3、Number（）实现case "+":getText.value=numFirst+Number(getText.value);break;case "-":getText.value=numFirst-Number(getText.value);break;case "*":getText.value=numFirst*Number(getText.value);break;case "/":if (!isNull(getText.value))getText.value=numFirst/Number(getText.value);else{getText.value=0;numFirst=0;alert("除数不能为0或空哦~")}break;}break;}}}}
}
//实现正负号功能
function mySign(n){/*   if (n.charAt(0)!='-')n="-"+n;elsen=n.substr(1,n.length);return n;*/return Number(n)*(-1);
}
//实现退位键功能
function myBack(n){n=n.substr(0,n.length-1);if (isNull(n))n=0;return n;
}
//实现小数点功能
function point_fun(n){//indexOf()表示这个符号是否存在，存在就返回位置，不存在就返回-1if (n.indexOf(".")==-1)n=n+".";return n;
}
//判断文本框是空或者为0的操作
function isNull(num){return (num=="0"||num.length==0)?true:false;
}
//给m按钮添加超链接
function Link(){document.getElementById("baidu").onclick=function (){window.location.href="http://www.baidu.com";}
}

三、知识总结：

一）HTML部分：

1、添加CSS和JavaScript的外部文件方法。 CSS中hrf=“路径” JavaScript中src=“路径”。

 <link rel="stylesheet" type="text/css" href="file.css"><script type="text/javascript" src="test1.js"></script>

2、onLoad事件：将所有JavaScript的初始化常常放在HTML的onLoad中，用一个函数初始化。

<body onload="init()">

二）CSS部分：

1、先将整体容器的布局定好了，再去设置里面内容的布局。

2、要想使用top和left等必须先设置position。通过top和left等属性就可以实现位置的移动。

3、添加背景图片background属性。

background: url("../img/img_1.png");

4、input属性选择器的使用。来将某一个标签的的全部属性值修改。

三）JavaScript部分：

1、给某个按钮添加超链接。获取他的属性，然后.onclick属性，然后用borm添加超链接。

//给m按钮添加超链接
function Link(){document.getElementById("baidu").onclick=function (){window.location.href="http://www.baidu.com";}
}

2、将字符串转化为数字方法：

1、值*1实现

2、parseInt（）实现，在将有小数的转化时，会将小数转化为整数，不进行小数运算。

3、Number（）实现

WEB网页版计算器（HTML、CSS、JavaScript实现）相关推荐

html+抽奖游戏,网页版抽奖HTML+CSS+javaScript
s> 前言对以前做的demo整理这是一个用原生的js编写的简单的网页抽奖页面. 效果图: Paste_Image.png 详细代码: *{ margin: 0; padding: 0; } ...
Web网页版简易计算器
说明: 1.这个计算器的功能比较简单,包括加减乘除,小数点,退格,清除以及等于. 2.首先写出html,即界面主要框架:再写出css,即属性,使框架看起来美观一些:最后就是javascript,就是功 ...
HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
JavaScript原生-网页版计算器
由于无聊看电脑上的系统软件翻到了计算器这个功能于是无聊就无聊吧,就简单写一下这个计算器的功能吧.这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制 ...
Spring Boot入门（9）网页版计算器
介绍在写了前八篇Spring Boot项目的介绍文章后,我们已经初步熟悉了利用Spring Boot来做Web应用和数据库的使用方法了,但是这些仅仅是官方介绍的一个例子而已. 本次分享将介绍 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载...
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...

WEB网页版计算器（HTML、CSS、JavaScript实现）

划重点！！！

（兄弟们只需要建一个test的html文件、file的CSS文件和test1的js文件，将对应的代码粘贴进去可以运行啦~）