JQueryで計算機を書く
28158 ワード
学習中に練習した小さなdemoとして、計算機を選びました.原因は多分ただとっくにやりたいだけで、比较的に简単で、また确かに多くの地方がよく分からないため、この游び物を选んで、実はネット上の多くのソースを见て、するのは难しくありませんが、私はやはり1周间の差が少ないことを书いて、毎日昼休みの1时间に退勤后の1时间を加えて、日曜日も1日の差がありません.やっと基本的に全体の機能を完成させて、後期にもう一度反復して最適化して、CSS 3のアニメーションと応答式の機能を加えて、この小さなdemoが携帯電話で走ることができるようにしたいと思っています.しかし、これはすべて後の話です.
くだらないことは言わないで、コードをつけましょう.
コード知識点
主にJQのコードを使っているので、知識点は主にJQです.
1.substr(start,length):文字列の指定された長さの文字を選択します.startは必須パラメータであり、文字列の開始位置のindex値であり、lengthは必須ではなく、文字列の長さを指定します.このメソッドは指定した文字列を返します.
2.hasClass(className):エレメントに指定したクラス名が含まれているかどうかを確認します.classNameには「.」は必要ありません.常用if判断;例:
3.他のコードはよく使われているので、いちいちリストする必要はありません.
実装の原理
ネット上で見るコードが長すぎて、理解が大変なので、このdemoは基本的に筆者自身の創作で、その中のいくつかの思想はネットを参考にしていますが、主な実現はすべて本人です.
数値を文字列resultとして保存し、演算子(+-*/)で文字列resultを最初の数値resultとして保存するのが原理です.1、同時に押した異なる演算子に基づいて、変数changeの異なる値を与える.2番目の文字列を保存するためにresultを空にします.2番目の文字列を入力したら、resultに再割り当て、イコールを押すとresultをresult_に割り当てます.2;また、change値によって異なる演算を行い、結果を出して画面に表示します.
その中で大量のif判断を使って、積み重ねて、私はどんな問題が発生することを恐れています......
に質問
問題がどこにあるのか言えないが、コードが乱れていて、少し臨機応変な感じがして、事前に計画していないので、頭が痛くて足が痛い感じがします.
1.マイナス記号を扱うとき、resultの値が文字列だったり、数字だったりするのは、文字そのものを扱うときは常に文字列の形で存在し、正負と演算を調整しようとするときは数字になるが、後期のコードが冗長になるため、私自身がますます混乱し、対処するしかない.
2.反復.私はもともと1週間で携帯電話で使える小さなアプリを作りたいと思っていましたが、時間の計画が不合理なため、前期の基本機能が長すぎて完成しました.後で改善したいのですが、応答式を組み合わせるのは難しくないはずです.
PS:コードは初歩的なテストを経て、正常に使用することができます.大神は何かバグがあることに気づいたので、レンガを撮って教えてください.
くだらないことは言わないで、コードをつけましょう.
<html>
<head>
<meta charset="UTF-8">
<title> title>
<style>
*{
margin: 0;
padding: 0;
color: #fff;
font-family: " ";
}
.content{
width: 280px;
height: 510px;
margin: 0 auto;
background: #000;
}
.bar {
height: 20px;
width: 100%;
padding-top: 4px;
box-sizing: border-box;
}
.bar .close{
width: 12px;
height: 12px;
border-radius: 50%;
background: red;
text-align: center;
line-height: 10px;
float: right;
color: red;
font-size: 10px;
margin-right: 4px;
cursor: pointer;
}
.bar .close:hover{
color: #fff;
}
.screen{
width: 260px;
margin-left:10px;
line-height: 140px;
text-align: right;
height: 140px;
font-size: 40px;
font-weight: lighter;
overflow: hidden;
}
.btn{
width: 70px;
height: 70px;
background: #ddd;
font-size: 24px;
text-align: center;
line-height: 70px;
float: left;
box-sizing: border-box;
border: 1px solid #000;
cursor: pointer;
}
.btn:nth-of-type(1),
.btn:nth-of-type(2),
.btn:nth-of-type(3){
background: #bbb;
}
.btn:nth-of-type(4n){
background: #ffb51c;
}
.btn:nth-of-type(17){
width: 140px;
}
.btn:nth-of-type(19){
background: #ffb51c;
}
style>
<script src="js/jquery-3.1.1.min.js">script>
head>
<body>
<div class="content">
<div class="bar">
<div class=close>xdiv>
div>
<div class="screen">div>
<div class="btn_con">
<div class="btn btn_reset">ACdiv>
<div class="btn btn_negtive">+/-div>
<div class="btn btn_delete">←div>
<div class="btn btn_divided calcu">÷div>
<div class="btn num">7div>
<div class="btn num">8div>
<div class="btn num">9div>
<div class="btn btn_multiplied calcu">×div>
<div class="btn num">4div>
<div class="btn num">5div>
<div class="btn num">6div>
<div class="btn btn_minus calcu">-div>
<div class="btn num">1div>
<div class="btn num">2div>
<div class="btn num">3div>
<div class="btn btn_plus calcu">+div>
<div class="btn num">0div>
<div class="btn num">.div>
<div class="btn btn_equal">=div>
div>
div>
<script type="text/javascript">
$(function(){
var src_show =$(".screen"); //
src_show.html("0");
var result ="", //
result_1="", //
result_2 = ""; //
var change=0; //
var num = $(".num"); //
var equal = $(".btn_equal"); //
var calcu = $(".calcu"); //
var reset = $(".btn_reset"); //
var negtive = $(".btn_negtive"), //
neg=1;
var del = $(".btn_delete"); //
//
negtive.click(function(){
if(src_show.text()=="0"){ // 0
src_show.html("-0");
neg=0;
}else if(src_show.text()=="-0"){
src_show.html("0");
neg=1;
}else{ // 0
result=src_show.text();
if(neg==0){ //
neg=1;
}else if(neg==1){ //
neg=0;
}
result=-result;
src_show.html(result);
}
})
//
num.click(function(){
result+=$(this).text();
if(neg==0){
src_show.html(-result);
}else{
src_show.html(result);
}
})
//
calcu.click(function(){
result_1=parseFloat(src_show.text());
if($(this).hasClass("btn_plus")){
change=1;
}
if($(this).hasClass("btn_minus")){
change=2;
}
if($(this).hasClass("btn_multiplied")){
change=3;
}
if($(this).hasClass("btn_divided")){
change=4;
}
result="";
src_show.html("0");
neg=1;
});
//
equal.click(function(){
if(result==""){
result_1=parseFloat(src_show.text());
}else{
result_2 = parseFloat(src_show.text());
}
if(change ==1){
result = result_1+result_2;
}
if(change ==2){
result = result_1-result_2;
}
if(change ==3){
result = result_1*result_2;
}
if(change ==4){
result = result_1/result_2;
}
src_show.html(result);
if(result<0){
neg=0;
}else{
neg=1;
}
result="";
});
//
reset.click(function(){
src_show.html("0");
result ="";
result_1="";
result_2 = "";
change=0;
neg=1;
});
//
del.click(function(){
if(result.length==1||result==""){ //
result="";
if(neg==1){
src_show.html("0");
}else if(neg==0){
src_show.html("-0");
}
}else{
result=result.substr(0,result.length-1);
if(neg==1){
src_show.html(result);
}else if(neg==0){
src_show.html(-result);
}
}
})
})
script>
body>
html>コード知識点
主にJQのコードを使っているので、知識点は主にJQです.
1.substr(start,length):文字列の指定された長さの文字を選択します.startは必須パラメータであり、文字列の開始位置のindex値であり、lengthは必須ではなく、文字列の長さを指定します.このメソッドは指定した文字列を返します.
2.hasClass(className):エレメントに指定したクラス名が含まれているかどうかを確認します.classNameには「.」は必要ありません.常用if判断;例:
if($(this).hasClass("btn_plus")){
change=1;
} 3.他のコードはよく使われているので、いちいちリストする必要はありません.
実装の原理
ネット上で見るコードが長すぎて、理解が大変なので、このdemoは基本的に筆者自身の創作で、その中のいくつかの思想はネットを参考にしていますが、主な実現はすべて本人です.
数値を文字列resultとして保存し、演算子(+-*/)で文字列resultを最初の数値resultとして保存するのが原理です.1、同時に押した異なる演算子に基づいて、変数changeの異なる値を与える.2番目の文字列を保存するためにresultを空にします.2番目の文字列を入力したら、resultに再割り当て、イコールを押すとresultをresult_に割り当てます.2;また、change値によって異なる演算を行い、結果を出して画面に表示します.
その中で大量のif判断を使って、積み重ねて、私はどんな問題が発生することを恐れています......
に質問
問題がどこにあるのか言えないが、コードが乱れていて、少し臨機応変な感じがして、事前に計画していないので、頭が痛くて足が痛い感じがします.
1.マイナス記号を扱うとき、resultの値が文字列だったり、数字だったりするのは、文字そのものを扱うときは常に文字列の形で存在し、正負と演算を調整しようとするときは数字になるが、後期のコードが冗長になるため、私自身がますます混乱し、対処するしかない.
2.反復.私はもともと1週間で携帯電話で使える小さなアプリを作りたいと思っていましたが、時間の計画が不合理なため、前期の基本機能が長すぎて完成しました.後で改善したいのですが、応答式を組み合わせるのは難しくないはずです.
PS:コードは初歩的なテストを経て、正常に使用することができます.大神は何かバグがあることに気づいたので、レンガを撮って教えてください.