



下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第javascript代碼實現簡易計算器html部分的話就是吧所有數字定義為一個class名字,把所有運算符號定義為一個class以及定義兩個input來存放運算符
script
lis=document.querySelectorAll("#boxul.num")//獲取所有的數字
opcr=document.querySelectorAll("#boxul.opcr")//獲取運算符
for(vari=0;ilis.length;i++){//遍歷所有的數字
lis[i].onclick=function(){
input1.value+=parseInt(this.innerHTML)//點擊input1顯示
//遍歷所有的運算符
for(leti=0;iopcr.length;i++){
opcr[i].onclick=function(){
if(text1.value==""){//當存放第一個值為空時候
text1.value=input1.value//存放第一個值
input1.value=""http://input框里的值為空
per.value=this.innerHTML;//存放符號的值為空
}else{
text1.value=eval(text1.value+per.value+input1.value)//不是空的時候計算
per.value=this.innerHTML;//存放符號的值為點擊的值
input1.value=""http://input框里的值為空
//等于
resule.onclick=function(){
input1.value=eval(text1.value+per.value+input1.value)//計算里面的值
per.value=""http://清空存放per的值
text1.value=""http://input框里的值為空
//點擊清空所有
returnZero.onclick=function(){
input1.value=""
per.value=""
text1.value=""
/script
完整部分
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
metaname="viewport"content="width=device-width,initial-scale=1.0"
metahttp-equiv="X-UA-Compatible"content="ie=edge"
title簡易計算器/title
style
#box{
background-image:linear-gradient(120deg,#84fab00%,#8fd3f4100%);
width:500px;
height:420px;
margin:auto;
margin-top:200px;
position:relative;
.reckon{
width:280px;
height:200px;
background-image:linear-gradient(120deg,#d4fc790%,#96e6a1100%);
position:absolute;
top:100px;
left:100px;
border:5pxsolid#2a2b2c
#input1{
background-image:linear-gradient(totop,#cfd9df0%,#e2ebf0100%);
border:none;
width:220px;
height:8px;
float:right;
margin-top:10px;
margin-right:20px;
outline:none;
padding:10px
ulli{
float:left;
list-style:none;
margin:4px2px;
border-radius:3px;
background-image:linear-gradient(120deg,#a1c4fd0%,#c2e9fb100%);
box-shadow:2px2px#ccc;
color:#fff;
font-weight:"楷體";
width:50px;
height:30px;
text-align:center;
line-height:30px;
ul{
margin-top:5px;
ulli:hover{
opacity:0.7;
/style
/head
body
divid="box"
divid="reckon"
inputtype="text"id="input1"
li7/li
li8/li
li9/li
li+/li
li4/li
li5/li
li6/li
li-/li
li1/li
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 紡織品批發渠道整合考核試卷
- 計算機外設連接與使用考核試卷
- 小學班級活動課件
- 對講機租賃考核試卷
- 毛織造品專利布局策略考核試卷
- 電動機檢修與保養方法考核試卷
- 礦山開采對水資源保護考核試卷
- 數字智慧方案5468丨全域旅游智能化?業解決?案
- 畢業設計風景園林
- 《NiosII硬件開發》課件分享
- 新《行政處罰法》亮點ppt解讀
- DB35T 2092-2022 高速公路邊坡工程養護技術規范
- GB/T 29531-2013泵的振動測量與評價方法
- VSM(價值流圖中文)課件
- 上海交通大學醫學院附屬仁濟醫院-日間手術管理信息化實踐與發展
- 有源、無源濾波器實驗報告
- SWOT分析法很全面課件
- 供應室手工清洗操作流程課件
- 消防應急疏散演練人員簽到表(標準通用版)
- 數據中心基礎設施管理系統DCIM整體方案
- 核電站入廠安全培訓課件
評論
0/150
提交評論