划重点!!!
(兄弟们只需要建一个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,不是数字返回true
if (!isNaN(this.value)){
if (isNull(getText.value))
getText.value=this.value;
else
getText.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;
else
n=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()表示这个符号是否存在,存在就返回位置,不存在就返回-1
if (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";
}
}
三、知识总结:
一)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";
}
}
2、将字符串转化为数字方法:
1、值*1实现
2、parseInt()实现,在将有小数的转化时,会将小数转化为整数,不进行小数运算。
3、Number()实现
更多推荐
WEB网页版计算器(HTML、CSS、JavaScript实现)
发布评论