JavaScript写个简易计算器
这个小练手旨在帮助刚上手学习JavaScript的同学练习最基本的Js知识，大神勿喷哈，由于这个是非常简易的计算器，可以完成的功能有加减乘除和AC（清屏），DEL（退格）等基本运算，所以代码也不复杂，我会先放出代码，然后再讲解我的思路，非常简单，只要你按照我的思路走，15分钟不到我保证你也可以敲出同样的代码，当然主要还是希望可以为入门的同学提供一种解决问题的思路，各位看完后可以自己动手敲一遍哈。
- Watch 0
- Star 1
- Fork 1
<h1 class="public "> <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
Code</div><span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"> <a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /Joe19970619/Calculator/issues" href="/Joe19970619/Calculator/issues"> <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg> <span itemprop="name">Issues</span> <span class="Counter">0</span> <meta itemprop="position" content="2">
Pull requests 0<a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /Joe19970619/Calculator/projects" href="/Joe19970619/Calculator/projects"> <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg> Projects <span class="Counter">0</span>
Insights<a data-skip-pjax="true" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy /Joe19970619/Calculator/security/advisories" href="/Joe19970619/Calculator/security/advisories"> <svg class="octicon octicon-shield" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 2l7-2 7 2v6.02C14 12.69 8.69 16 7 16c-1.69 0-7-3.31-7-7.98V2zm1 .75L7 1l6 1.75v5.268C13 12.104 8.449 15 7 15c-1.449 0-6-2.896-6-6.982V2.75zm1 .75L7 2v12c-1.207 0-5-2.482-5-5.985V3.5z"></path></svg> Security<div class="signup-prompt-bg rounded-1"> <div class="signup-prompt p-4 text-center mb-4 rounded-1"> <div class="position-relative"> <!-- '"` --><!-- </textarea></xmp> --><form action="/prompt_dismissals/signup" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="authenticity_token" value="q9wNy80XH1icWnjxW+vAvPX6kI3r+hQLR8/ld7SG1GwruD/ijhrEp2r8JNBSr4/BrG357f5FXrEWadtzpXy92Q=="> <button type="submit" class="position-absolute top-0 right-0 btn-link link-gray" data-ga-click="(Logged out) Sign up prompt, clicked Dismiss, text:dismiss"> Dismiss </button>Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.
Sign up<div class="mb-3"> <div class="f4"> <span class="text-gray-dark mr-2" itemprop="about">
小练手的计算器
<ul class="numbers-summary"> <li class="commits"> <a data-pjax="" href="/Joe19970619/Calculator/commits/master"> <svg class="octicon octicon-history" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 13H6V6h5v2H8v5zM7 1C4.81 1 2.87 2.02 1.59 3.59L0 2v4h4L2.5 4.5C3.55 3.17 5.17 2.3 7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-.34.03-.67.09-1H.08C.03 7.33 0 7.66 0 8c0 3.86 3.14 7 7 7s7-3.14 7-7-3.14-7-7-7z"></path></svg> <span class="num text-emphasized"> 3 </span> commits </a> </li> <li> <a data-pjax="" href="/Joe19970619/Calculator/branches"> <svg class="octicon octicon-git-branch" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg> <span class="num text-emphasized"> 1 </span> branch </a> </li> <li> <a href="/Joe19970619/Calculator/releases"> <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg> <span class="num text-emphasized"> 0 </span> releases </a> </li> <li> <a href="/Joe19970619/Calculator/graphs/contributors">
1
contributor
</ul>
Branch: master<details class="details-reset"> <summary title="Click for language details" data-ga-click="Repository, language bar stats toggle, location:repo overview"> <div class="d-flex repository-lang-stats-graph"> <span class="language-color" aria-label="HTML 100.0%" style="width:100.0%; background-color:#e34c26;" itemprop="keywords">HTML</span> </div> </summary> <div class="repository-lang-stats"> <ol class="repository-lang-stats-numbers"> <li> <a href="/Joe19970619/Calculator/search?l=html" data-ga-click="Repository, language stats search click, location:repo overview"> <span class="color-block language-color" style="background-color:#e34c26;"></span> <span class="lang">HTML</span> <span class="percent">100.0%</span> </a> </li> </ol> </div> </details>0 results found.<button type="button" class="btn btn-sm disabled tooltipped tooltipped-n new-pull-request-btn" aria-label="You must be signed in to create a pull request"> New pull request </button><a class="btn btn-sm empty-icon float-right BtnGroup-item" data-hydro-click="{"event_type":"repository.click","payload":{"target":"FIND_FILE_BUTTON","repository_id":83548727,"client_id":"510879113.1564372964","originating_request_id":"C413:6CEA:305E12:46BA85:5D3FFB3F","originating_url":"https://github.com/Joe19970619/Calculator","referrer":"https://www.jianshu.com/p/13aec71c854c","user_id":null}}" data-hydro-click-hmac="7dcf3b5335df7e892c9d4ec04668e9ed1cd04f28059f7be00ae0eba7aca48fc2" data-ga-click="Repository, find file, location:repo overview" data-hotkey="t" data-pjax="true" href="/Joe19970619/Calculator/find/master">Find File</a>
Clone or download<details class="get-repo-select-menu js-get-repo-select-menu js-anon-get-repo-select-menu position-relative details-overlay details-reset"></div> <div class="mt-2"> <a class="btn btn-outline get-repo-btn tooltipped tooltipped-s tooltipped-multiline js-get-repo" aria-label="Clone Joe19970619/Calculator to your computer and use it in GitHub Desktop." data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"REPOSITORY","repository_id":83548727,"client_id":"510879113.1564372964","originating_request_id":"C413:6CEA:305E12:46BA85:5D3FFB3F","originating_url":"https://github.com/Joe19970619/Calculator","referrer":"https://www.jianshu.com/p/13aec71c854c","user_id":null}}" data-hydro-click-hmac="9028a8922795254bca4553f433e54052e4628751324b66b6293b6d82a4c3f1f6" data-open-app="windows" href="https://desktop.github.com">Open in Desktop</a></div> </div> <div class="js-modal-downloading" hidden=""> <div class="py-2 px-3"> <h4 class="lh-condensed mb-3">Downloading<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span></h4> <p class="text-gray"> Want to be notified of new releases in <span class="text-bold">Joe19970619/Calculator</span>? </p> </div> <div class="width-full d-flex"> <a rel="nofollow" class="get-repo-btn btn btn-outline" style="width: 50%" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"download popover","repository_id":83548727,"auth_type":"LOG_IN","client_id":"510879113.1564372964","originating_request_id":"C413:6CEA:305E12:46BA85:5D3FFB3F","originating_url":"https://github.com/Joe19970619/Calculator","referrer":"https://www.jianshu.com/p/13aec71c854c","user_id":null}}" data-hydro-click-hmac="02092379f4baf6e9047d1fd2c2986e47d452529612595c45ae94b00d5e4e22b8" href="/login?return_to=https%3A%2F%2Fgithub.com%2FJoe19970619%2FCalculator">Sign in</a> <a rel="nofollow" class="get-repo-btn btn btn-primary" style="width: 50%" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"download popover","repository_id":83548727,"auth_type":"SIGN_UP","client_id":"510879113.1564372964","originating_request_id":"C413:6CEA:305E12:46BA85:5D3FFB3F","originating_url":"https://github.com/Joe19970619/Calculator","referrer":"https://www.jianshu.com/p/13aec71c854c","user_id":null}}" data-hydro-click-hmac="ac9eaee05869264d8e7545af41cdfa844db836e464bad37de11c7dbe03083221" href="/join?return_to=%2FJoe19970619%2FCalculator">Sign up</a> </div> </div> <div class="js-modal-download-mac py-2 px-3 d-none"> <h4 class="lh-condensed mb-3">Launching GitHub Desktop<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span></h4> <p class="text-gray">If nothing happens, <a href="https://desktop.github.com/">download GitHub Desktop</a> and try again.</p> <p><button class="btn-link js-get-repo-modal-download-back">Go back</button></p> </div> <div class="js-modal-download-windows py-2 px-3 d-none"> <h4 class="lh-condensed mb-3">Launching GitHub Desktop<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span></h4> <p class="text-gray">If nothing happens, <a href="https://desktop.github.com/">download GitHub Desktop</a> and try again.</p> <p><button class="btn-link js-get-repo-modal-download-back">Go back</button></p> </div> <div class="js-modal-download-xcode py-2 px-3 d-none"> <h4 class="lh-condensed mb-3">Launching Xcode<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span></h4> <p class="text-gray">If nothing happens, <a href="https://developer.apple.com/xcode/">download Xcode</a> and try again.</p> <p><button class="btn-link js-get-repo-modal-download-back">Go back</button></p> </div> <div class="js-modal-download-visual-studio py-2 px-3 d-none"> <h4 class="lh-condensed mb-3">Launching Visual Studio<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span></h4> <p class="text-gray">If nothing happens, <a href="https://visualstudio.github.com/">download the GitHub extension for Visual Studio</a> and try again.</p> <p><button class="btn-link js-get-repo-modal-download-back">Go back</button></p> </div> </div><div class="flex-auto f6 mr-3"> <a href="/Joe19970619/Calculator/commits?author=Joe19970619" class="commit-author tooltipped tooltipped-s user-mention" aria-label="View all commits by Joe19970619">Joe19970619</a> <a data-pjax="true" title="Update README.md" class="message text-inherit" href="/Joe19970619/Calculator/commit/1e85872851abba0792f7dc302585e3dd189676b6">Update README.md</a> </div> <div class="no-wrap"> Latest commit <a class="commit-tease-sha" href="/Joe19970619/Calculator/commit/1e85872851abba0792f7dc302585e3dd189676b6" data-pjax=""> 1e85872 </a> <span itemprop="dateModified"><relative-time datetime="2017-10-26T05:04:13Z" title="2017年10月26日 GMT+8 下午1:04">on 26 Oct 2017</relative-time></span> </div><tbody> <tr class="warning include-fragment-error"> <td class="icon"><svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></td> <td class="content" colspan="3">Failed to load latest commit information.</td> </tr> <tr class="js-navigation-item" aria-selected="false"> <td class="icon"> <svg aria-label="file" class="octicon octicon-file" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"></path></svg> <img width="16" height="16" class="spinner" alt="" src="https://github.githubassets.com/images/spinners/octocat-spinner-32.gif"> </td> <td class="content"> <span class="css-truncate css-truncate-target"><a class="js-navigation-open" title="README.md" id="04c6e90faac2675aa89e2176d2eec7d8-d3408ea20b884f265330230a7a04b2610b4199a6" href="/Joe19970619/Calculator/blob/master/README.md">README.md</a></span> </td> <td class="message"> <span class="css-truncate css-truncate-target"> <a data-pjax="true" title="Update README.md" class="link-gray" href="/Joe19970619/Calculator/commit/1e85872851abba0792f7dc302585e3dd189676b6">Update README.md</a> </span> </td> <td class="age"> <span class="css-truncate css-truncate-target"><time-ago datetime="2017-10-26T05:04:13Z" title="2017年10月26日 GMT+8 下午1:04">2 years ago</time-ago></span> </td> </tr> <tr class="js-navigation-item navigation-focus" aria-selected="true"> <td class="icon"> <svg aria-label="file" class="octicon octicon-file" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"></path></svg> <img width="16" height="16" class="spinner" alt="" src="https://github.githubassets.com/images/spinners/octocat-spinner-32.gif"> </td> <td class="content"> <span class="css-truncate css-truncate-target"><a class="js-navigation-open" title="calculator.html" id="0080c5424225bf67789504f0f67c0aca-96b1aaa50fce3ce7ccd1e4085d8fdfaec20860d3" href="/Joe19970619/Calculator/blob/master/calculator.html">calculator.html</a></span> </td> <td class="message"> <span class="css-truncate css-truncate-target"> <a data-pjax="true" title="一个简易计算器" class="link-gray" href="/Joe19970619/Calculator/commit/45632b07578e51293cfb9e3dc3cc5f35a7bfada6">一个简易计算器</a> </span> </td> <td class="age"> <span class="css-truncate css-truncate-target"><time-ago datetime="2017-03-01T13:18:48Z" title="2017年3月1日 GMT+8 下午9:18">2 years ago</time-ago></span> </td> </tr> </tbody>Type Name Latest commit message Commit time README.md
HTML代码部分
<table> <tr> <td colspan="4"><input class="txt" type="text" disabled/></td> </tr> <tr> <td colspan="2"><input class="btn_click" type="button" value="AC"/></td> <td colspan="2"><input class="btn_click" type="button" value="DEL"/></td> </tr> <tr> <td><input class="btn" type="button" value="7"/></td> <td><input class="btn" type="button" value="8"/></td> <td><input class="btn" type="button" value="9"/></td> <td><input class="btn" type="button" value="*"/></td>
<span class="pl-k"><</span><span class="pl-k">/</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>4<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>5<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>6<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>/<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span><span class="pl-k">/</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>1<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>2<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>3<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>-<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span><span class="pl-k">/</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>tr<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>0<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>+<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span>td<span class="pl-k">><</span>input <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>=<span class="pl-pds">"</span></span><span class="pl-k">/</span><span class="pl-k">><</span><span class="pl-k">/</span>td<span class="pl-k">></span> <span class="pl-k"><</span><span class="pl-k">/</span>tr<span class="pl-k">></span></table>
HTML这部分非常简单，没什么多说的，整个框架我利用table搭建的，需要注意的是，由于计算器屏幕不可输入，我设置为了disabled。
CSS代码部分
<style> table{ border-collapse: collapse; margin: auto auto; } td{ width: 150px; line-height: 70px; } .btn{ width: 150px; line-height: 70px; font-size: x-large; } .btn_click{ width: 302px; line-height: 70px; font-size: x-large; } .txt{ width: 600px; line-height: 100px; font-size: x-large;text-align: right; } </style>
CSS也是简单设定了一下宽高，我是在火狐浏览器上运行的，由于我没使用百分比来设置宽高，在其他浏览器上样式会发生一定程度上的改变，不过不影响功能就是了。
JavaScript部分
请先不要直接看这部分代码，先看我的思路讲解再看这部分，你绝对可以轻松理解
<script> /*在网页加载时 给按钮添加点击事件*/ window.onload = function () { //定义数组 来接收用户按的数字和计算符号 var way_res = []; //获取按钮对象 var btn_txt = document.getElementsByClassName("btn"); //获取屏幕元素 var txt = document.getElementsByClassName("txt")[0]; //获取清空按钮和退格按钮 var btn_way = document.getElementsByClassName("btn_click"); for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { //判断按钮 if (this.value == "AC") { way_res = []; txt.value = ""; } else { /* substr() 截断字符串 1.从那个位置开始 2.截取多少长度*/ txt.value = txt.value.substr(0, txt.value.length - 1); } } } //给btn_txt 数组对象添加事件 for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { /* this 指代的是当前事件的执行对象*/ /*按完键将值传给屏幕*/ /*判断是否为数字*/ if (txt.value == "" && this.value == ".") { txt.value = "0."; } else { if (!isNaN(this.value) || this.value == ".") { /*用户输入的是数字或者点的情况*/ /*indexOf() 用来查找字符 如果有返回当前位置 如果没有返回-1*/ if (txt.value.indexOf(".") != -1) { /*有点存在的情况*/ if (this.value != ".") { /*当前按得不是点，进行拼接*/ txt.value += this.value; } } else { /*没点存在直接拼接*/ txt.value += this.value; } } else { /*是符号的情况*/ //先存值 在清屏 if (this.value != "=") { /*是符号但不为等号的情况*/ way_res[way_res.length] = txt.value; //存符号 way_res[way_res.length] = this.value; //清屏 txt.value = ""; } else { /*是等号的情况*/ way_res[way_res.length] = txt.value; //eval()方法 专门用来计算表达式的值 txt.value = eval(way_res.join("")); //计算完成之后将数组清空 way_res = []; } } } } } } </script>
思路讲解
请先不要看上面的JS代码，接下来请试着跟着我的思路走，完成这个计算器的功能，我是分成三个部分来解决的，第一部分是将除了AC，DEL这两个键之外的按键值获取到屏幕上，第二部分是计算屏幕上的表达式的值，第三部分是添加AC（清屏），DEL（退格）功能，检查BUG。
我认为解决简单的JS问题大体都可以分三步：
- 1.获取你想操作的元素；
- 2.保存你想操作的元素；
- 3.对元素进行（遍历）操作；
我的第一步目的是将除了AC，DEL这两个键之外的按键值获取到屏幕上，那么我首先得获取按钮元素以及屏幕元素并将它们保存在btn_txt和txt变量里：
//获取按钮对象 var btn_txt = document.getElementsByClassName("btn"); //获取屏幕元素 var txt = document.getElementsByClassName("txt")[0];
获取并保存了想操作的元素，接下来就对他们添加操作：
//给btn_txt 数组对象添加onclick事件 for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { }
在进行操作的之前请等一下，我们思考一下，btn_txt数组里存放着0,1,2,3,4,5,6,7,8,9，" . "，" + "，" - "，" * "，" \ "，" = "等一系列东西，我们当然要对数字和计算符号进行分开操作，所以我们用If……else……来判断一下
if (!isNaN(this.value) || this.value == ".") { /*用户输入的是数字或者点的情况*/ /* this 指代的是当前事件的执行对象*/ } else{ /*用户输入的是符号的情况*/ }
OK，我们接下来先考虑用户输入的是数字或者点的情况，首先数字可以连续输入到屏幕里，但是小数点不应该能连续输入到屏幕里，小数点应该只有一个才对，所以我们应该先加一个判断条件：屏幕里是否有小数点存在？如果屏幕里已经有小数点存在，那么我只允许你再输入数字，否则屏幕值不会接收，即是如下代码：
if (!isNaN(this.value) || this.value == ".") { /*用户输入的是数字或者点的情况*/ /* this 指代的是当前事件的执行对象*/
<span class="pl-c"><span class="pl-c">/*</span>有点存在的情况<span class="pl-c">*/</span></span> <span class="pl-k">if</span> (<span class="pl-smi">txt</span>.<span class="pl-c1">value</span>.<span class="pl-c1">indexOf</span>(<span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span>) <span class="pl-k">!=</span> <span class="pl-k">-</span><span class="pl-c1">1</span>) { <span class="pl-c"><span class="pl-c">/*</span>indexOf() 用来查找字符 如果有 返回当前位置 如果没有 返回-1<span class="pl-c">*/</span></span> <span class="pl-k">if</span> (<span class="pl-c1">this</span>.<span class="pl-c1">value</span> <span class="pl-k">!=</span> <span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span>) { <span class="pl-c"><span class="pl-c">/*</span>当前按得不是点，进行拼接<span class="pl-c">*/</span></span> <span class="pl-smi">txt</span>.<span class="pl-c1">value</span> <span class="pl-k">+=</span> <span class="pl-c1">this</span>.<span class="pl-c1">value</span>; <span class="pl-c"><span class="pl-c">/*</span>这里的txt.value += this.value;意思是</span>将当前用户所按的数字添加到屏幕上去/
}
}
else {
/没点存在直接拼接*/
txt.value += this.value;
}
}else{
/用户输入的是符号的情况接下来再考虑/
}好了，用户输入的是数字或者点的情况已经考虑结束了，现在考虑用户输入的是运算符号的情况！这种情况也分两部分，一种是用户按了等号，一种是按了除等号之外的其他加减乘除运算符号，因为等号比较特殊一点，按了就直接应该得出结果了，所以要区用if……else……分开。我这样的思路你可以理解吧！
还有一个事情我们要考虑的是，我希望在我按下加减乘除运算符号时可以清屏，这样我就可以继续键入下一数字了（举例：我按下数字“5”，再按下运算符“ + ”，按下瞬间屏幕清屏，然后我再键入数字“3”，最后按下“ = ”，最后得出结果“2”），但是清屏我并不想让我的数据丢失，所以此时我先新建一个数组来保存这些数据（这里的“数据”指数字和运算符，也叫“表达式”），然后再清屏！具体代码如下：
var way_res = []; /*先自定义一个数组 来接收用户按的数字和计算符号 注意这里定义要在开头定义，而不是在函数内部*/
if (!isNaN(this.value) || this.value == “.”) {
/用户输入的是数字或者点的情况/
/上面已经讨论过了，这里我省点地方/
}else{
/用户输入的是符号的情况/
//先存值 在清屏
if (this.value != “=”) {
/是符号但不为等号的情况/
way_res[way_res.length] = txt.value;
//存符号
way_res[way_res.length] = this.value;
//清屏
txt.value = “”;
}
else{
/为等号的情况下面讨论/
}
}好了下面我们讨论用户按下等号键的情况，这种比较简单，直接对表达式（表达式就是我们之前输入的数字与符号组合）进行计算就可以啦，需要注意的是计算完成之后要把保存表达式的数组way_res清空，因为本次运算完满结束了，如果不清空里面的数据会影响下一次正常计算；
else { /*为等号的情况即是计算屏幕上表达式的值*/
<span class="pl-c"><span class="pl-c">//</span>先将屏幕上所有值保存到数组里</span> way_res[<span class="pl-smi">way_res</span>.<span class="pl-c1">length</span>] <span class="pl-k">=</span> <span class="pl-smi">txt</span>.<span class="pl-c1">value</span>; <span class="pl-c"><span class="pl-c">//</span>eval()方法 专门用来计算表达式的值</span> <span class="pl-c"><span class="pl-c">//</span>join()方法 将数组的每位拼接成字符串</span> <span class="pl-smi">txt</span>.<span class="pl-c1">value</span> <span class="pl-k">=</span> <span class="pl-c1">eval</span>(<span class="pl-smi">way_res</span>.<span class="pl-c1">join</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>)); <span class="pl-c"><span class="pl-c">//</span>计算完成之后将数组清空</span> way_res <span class="pl-k">=</span> [];}
首先，获取清空按钮和退格按钮，然后把它们保存在btn_way变量下； 然后就遍历进行添加功能，这里同样需要一个if……else……语句来判断用户按的是AC按钮还是DEL按钮
var btn_way = document.getElementsByClassName("btn_click"); //获取清空按钮和退格按钮 for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { //判断按钮 if (this.value == "AC") { //如果是AC按钮，那么清空屏幕和数组里的一切值 way_res = []; txt.value = ""; } else { //不是AC，那必然是DEL，我们把屏幕的最后一位抹去再重新赋给屏幕
<span class="pl-c"><span class="pl-c">/*</span> substr(参数1，参数2) 截断字符串</span>参数1.从那个位置开始 参数2.截取多少长度*/
txt.value = txt.value.substr(0, txt.value.length - 1);
}
}
}到这里为止，所有功能基本上全部添加完毕，然后我们进行调试，发现一个问题，就是当我们第一次按键就按小数点“ . ”时，这时用户的本意应为“ 0. ”,意即用户是想输入小数的，但是懒得按“0”，直接按了小数点，所以我们应该加一个判断条件来帮助用户，直接按小数点成为有意义的行为，代码如下：
if (txt.value == "" && this.value == ".") { txt.value = "0."; }
好了，最后再加上window.onload = function(){}，代码，到这里就全部结束了；大家有不理解的地方欢迎在评论里问我；
再放一遍JavaScript全代码
<script> window.onload = function () { var way_res = []; var btn_txt = document.getElementsByClassName("btn"); var txt = document.getElementsByClassName("txt")[0]; var btn_way = document.getElementsByClassName("btn_click"); for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { if (this.value == "AC") { way_res = []; txt.value = ""; } else { txt.value = txt.value.substr(0, txt.value.length - 1); } } } for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { if (txt.value == "" && this.value == ".") { txt.value = "0."; } else { if (!isNaN(this.value) || this.value == ".") { if (txt.value.indexOf(".") != -1) { if (this.value != ".") { txt.value += this.value; } } else { txt.value += this.value; } } else { if (this.value != "=") { way_res[way_res.length] = txt.value; way_res[way_res.length] = this.value; txt.value = ""; } else { way_res[way_res.length] = txt.value; txt.value = eval(way_res.join("")); way_res = []; } } } } } } </script>
</main>
3711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
