Web前端開發實驗作業 - 網頁計算器
項目已上傳至GitHub 僅供學習交流 需要自取 不妨點個start 謝謝
https://github.com/zhenggengqiong/Computer_CollegeHomeWork
實驗內容及要求:
設計實現一個網頁前端程序“網頁計算器”,完成以下內容:
1)設計“網頁計算器”,模擬實體計算器外觀;
2)設置頁面元素的id供JavaScript控制;
3)編寫外部JavaScript腳本實現用戶交互;
4)實現基本四則運算。
要求:
1)有詳細的功能描述、界面交互設計描述;
2)有解決方案(原理)描述;
3)有關鍵代碼及注解。
功能描述及關鍵代碼
加、減、乘、除、除余的計算,和刪除、清空的功能。
<script>
//獲取按鍵的值,並輸入進文本框
var get = function(x){
var input = document.getElementById('input');
//默認為0,輸入時清空
if(input.value == 0){
input.value = "";
}
//輸入進文本框
input.value += document.getElementById(x.id).value;
}
//小數點的點擊操作
var Point = function(){
var input = document.getElementById('input');
//控制不能有多個小數點
if(input.value.indexOf('.')==-1){
input.value+='.';
}
}
//等號的點擊操作
var is = function(){
var input = document.getElementById('input');
//判斷輸入的操作是否錯誤
try{
var sum = eval(input.value);
//控制不能有多個等號,並輸出等號
if(input.value.indexOf('=')==-1){
input.value += '=';
}
//輸出計算結果
input.value += sum;
}catch(e){
//如果出錯,文本框的值變為ERROR
input.value += "=ERROR";
}
}
//退格DEL的點擊操作
var backSpace=function(){
var input = document.getElementById('input');
//文本框的值的長度減一,實現刪除
input.value = input.value.substr(0,input.value.length-1);
}
Document.getElementById( 'AC')= function(){
var input = document.getElementById('input');
//文本框的值清空為0
input.value = "0";
}
//改變樣式
var count = 1;
var change = function(){
var button = document.getElementById("css");
if(document.getElementById("change").onclick){
count++;
}
if(count%2==0){
button.setAttribute("href","compute2.css");
}else{
button.setAttribute("href","compute.css");
}
} </script>