前言
提示:初学JS,方法都是比较简单的,如果各位道友有什么更好的方法,欢迎交流
提示:以下是本篇文章正文内容,下面案例可供参考
一、所用知识点
1,通过H5中的onclick属性与JS传输数据,
2,JS的函数(真的和java颇为相像)
3,JS通过H5的id查找,寻找目标,传送数据,
二、代码奉上
1.H5和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
/*background-color: #1b1e21;*/
}
input{
width: 30px;
border: 0;
padding: 0;
}
#txt{
width: 135px;
}
#AC{
width: 65px;
}
#txt0{
width: 65px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="txt" readonly><br>
<input type="button" id="AC" onClick="Clear()" value="AC">
<input type="button" id="/" onClick="TNumber(this.value)" value="/">
<input type="button" id="%" onClick="TNumber(this.value)" value="%"><br>
<input type="button" id="7" value="7" onClick="TNumber(this.value)">
<input type="button" id="8" value="8" onClick="TNumber(this.value)">
<input type="button" id="9" value="9" onClick="TNumber(this.value)">
<input type="button" id="+" value="+" onClick="TNumber(this.value)"><br>
<input type="button" id="4" value="4" onClick="TNumber(this.value)">
<input type="button" id="5" value="5" onClick="TNumber(this.value)">
<input type="button" id="6" value="6" onClick="TNumber(this.value)">
<input type="button" id="-" value="-" onClick="TNumber(this.value)"><br>
<!--我发现他好像对onclick的大小写没有什么分别,onclick和onClick都可以用-->
<input type="button" id="1" value="1" onClick="TNumber(this.value)">
<input type="button" id="2" value="2" onclick="TNumber(this.value)">
<input type="button" id="3" value="3" onclick="TNumber(this.value)">
<input type="button" id="txt*" value="*" onclick="TNumber(this.value)"><br>
<input type="button" id="txt0" value="0" onclick="TNumber(this.value)">
<input type="button" id="txt." value="." onclick="TNumber(this.value)">
<input type="button" id="txt=" value="=" onclick="Calculator()">
</div>
<script type="text/javascript" src="简易计算器2.js"></script>
</body>
</html>
2.JS
/*读取id为txtNum的文本,建立沟通桥梁*/
var text=document.getElementById("txt");
var numObj="";
var Total=0;
/*输入*/
function TNumber(obj)
{
numObj+=obj;
text.value=numObj;//字符串连接,对系显示数字的框进行重写
}
/*计算*/
function Calculator()
{
var str=text.value;
Total=eval(text.value);//编译输入文本框的内容,eval()函数有计算功能
text.value=str+"="+Total;//重写显示内容,并赋值输出
numObj="";//重归于空字符串
}
/*清屏*/
function Clear()
{
text.value="";
numObj="";
}