javascriptは簡易計算機機能を実現します。
本論文の実例はJavascriptが簡易計算機の具体的なコードを実現することを共有しました。
機能:
1、数字ボタンをクリックして数字を入力できるようにする
2、基礎四則演算機能を実現し、必要な異常処理を追加する。例えば、除数はゼロではない。
3、小数点添加機能を実現し、異常処理を追加し、小数点では一回しか現れない。
4、正負号機能を実現する
5、キャンセル機能を実現し、すでに最後のビットになった場合、表示枠はゼロと表示されます。
6、クリーン機能
使用する知識点：
1、大量のカスタム関数を利用して業務ロジックを実現する
2、事件と事件の処理を活用する
3、異常処理のプログラミング方法を育成する
4、育成と実践は異なった考え方を利用してプログラミングを実現する。
総合練習の目的：
1、CSS、HTMLとJSの効果的な覚醒技術を組み合わせ、業務機能を実現する
2、プログラミング思想を鍛え、育成し、問題を解決する能力と方法
3、複数のプログラミング構想を利用して、事前に設定した目標を達成するためにトレーニングと育成する。
ページ効果:
ソースコード
html
機能:
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="demo.js"></script>
</head>
<body>
<form action="http//:www.baidu.com">
<input type="text" id="text" value="0" disabled /><br/>
<input type="button" id="reset" class="btn" value="C"/>
<input type="button" id="back" class="btn" value="←"/>
<input type="button" id="plus" class="btn" value="+/-"/>
<input type="button" id="divide" class="btn" value="/"/><br/>
<input type="button" id="num1" class="btn" value="1"/>
<input type="button" id="num2" class="btn" value="2"/>
<input type="button" id="num3" class="btn" value="3"/>
<input type="button" id="multiply" class="btn" value="*"/><br/>
<input type="button" id="num4" class="btn" value="4"/>
<input type="button" id="num5" class="btn" value="5"/>
<input type="button" id="num6" class="btn" value="6"/>
<input type="button" id="subtract" class="btn" value="-"/><br/>
<input type="button" id="num7" class="btn" value="7"/>
<input type="button" id="num8" class="btn" value="8"/>
<input type="button" id="num9" class="btn" value="9"/>
<input type="button" id="add" class="btn" value="+"/><br/>
<input type="button" id="num0" class="btn" value="0"/>
<input type="button" id="point" class="btn" value="."/>
<input type="button" id="equal" class="btn" value="="/>
<input type="button" id="ddd" class="btn" value="d"/>
</form>
</body>
</html>
*{
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;
}
/* ， */
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);
}
}