Web前端開發實驗作業 - 網頁計算器


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>
實驗結果及分析
可以進行運算和刪除、清空功能。
先搭建計算機結構和css樣式,用的div和position和float。每個符號的onClick事件都等於 取值函數get(),輸出到文本框中。等於的onClick等於對應函數,計算結果,如果錯誤,返回ERROR。
通過setAttribute函數改變css樣式,並用全局變量計數
用document.getElementById(‘id’)獲取id;onClick = function() 可以寫點擊時的操作;
eval(str)可以自動返回計算字符串的結果,錯誤則拋出異常;
.indexOf(x) 返回x的角標,如果沒有則返回-1;
.length 返回長度


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM