带有JavaScript程序标签的网页未与其他标签/文本区域对齐

时间：2015-04-14 08:20:40

标签： javascript html css

我为问愚蠢的问题而道歉，但我试图弄乱CSS并且变化很小。我正在尝试获取标签/下拉列表（默认情况下称为“撤销”以与其他区域对齐，并且还消除了文本区域之间的一些空间，使其看起来更像我的教师提供的屏幕截图。我做了通过减少像素来减少区域之间的一些额外空间，但我不确定如何让它看起来像截图一样。

如果有人愿意提出建议，我会真的很感激。

var pad_left = function(text, width, pad) {  //sets up text area formatting
	var result = text.toString();
	while (result.length < width) {
		result = pad + result;
	}
	return result;  // populates text area
}

var pad_right = function(text, width, pad) { // sets up text area formatting
	var result = text.toString();
	while (result.length < width) {
		result = result + pad;
	}
	return result;  
}

var getResults = function(results) { // actual calculation functions 
	if (results.length == 0) {
		return "";
	}

	var balance = 2000;  / /actual format of text area
	var list = pad_right("Date", 12, " ");
	list += pad_right("Amount", 12, " ");
	list += pad_right("Running Balance", 15, " ") + "\n";
	list += pad_right("", 11, "-") + " ";
	list += pad_right("", 11, "-") + " ";
	list += pad_right("", 15, "-") + "\n";
	
	for (var i = 0; i < results.length; i++) {  // loop to calculate balances
 		var trans = results[i];
		list += pad_right(trans["date"], 12, " ");
		if(trans["type"] == "withdrawal") // withdrawal calculation
		{
			balance -= trans["amount"]
			list += "$" + pad_left( "-" + trans["amount"].toFixed(2), 11, " ") + " ";
		} else { //for Deposits
			balance += trans["amount"]
			list += "$" + pad_left( trans["amount"].toFixed(2), 11, " ") + " ";
		}
				
		list += "$" + pad_left(balance.toFixed(2), 14, " ") + "\n";		
	}
	return list;
}
var get_runningBalance = function(results) {  // function to calculate Running Balance
	var runningBalance = 0, amount;
	for (var i in results) {
		runningBalance =  startBal - "amount" ;
		runningBalance += parseInt(runningBalance.toFixed(2));
	}
	return runningBalance;
}

var get_startBal = function(transactions){ // fills Starting Balance
	return 2000;
}

var get_totalDep = function(transactions){  // function to calculate Total Deposits
	var totalDep = 0;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "deposit")
		{
			totalDep += trans["amount"]
		}
	}
	return totalDep;
}

var get_totalWd = function(transactions){ // function to calculate Total Withdrawals
	var totalWd = 0;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "withdrawal")
		{
			totalWd -= trans["amount"]
		}
	}
	return totalWd;
}

var get_endBal = function(transactions){ // function to calculate Ending Balance
	var balance = 2000;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "withdrawal")
		{
			balance -= trans["amount"]
		} else { // Is Deposit
			balance += trans["amount"]
		}
	}
	return balance.toFixed(2);
}​

// sets up the global variables and arrays for the functions
var balances = [];
var transactions = [];

var $ = function (id) {
    return document.getElementById(id);
}
// pulls the info from text boxes
var update_display = function() {
	$("startBal").value = get_startBal(transactions);
	$("totalDep").value = get_totalDep(transactions);
	$("totalWd").value = get_totalWd(transactions);
	$("endBal").value = get_endBal(transactions);
	
	$("date").value = "";
	$("amount").value = "";
	
	$("date").focus();
	
	$("results").value = getResults(transactions);
}
// function to add transactions to the text area 
var addTrans_click = function () {
	var trans = [];
	trans["date"] = $("date").value;
	trans["amount"] = parseFloat($("amount").value);
	trans["type"] = $("type").value;
	
	if (trans["date"] == "") return;
	if (isNaN(trans["amount"])) return;
		
	transactions.push(trans);
	update_display(); 
}
// the event handlers 
window.onload = function () {
	$("addTrans").onclick = addTrans_click;
	$("date").focus();
}​
body {
    background: none repeat scroll;
    font-family: Arial,Helvetica,sans-serif;
}
#content {
    background: none repeat scroll;
    border: 8px solid gray;
    margin: 10px auto;
    padding: 5px 20px;
    text-align: center;
    width: 600px;
}
h1, h2 {
    text-align: left;
}
label {
    display: block;
    float: left;
    padding-right: 1em;
    text-align: right;
    width: 10em;
}
input {
    display: block;
    float: left;
}
select {
    display: block;
    text-align: center;
    width: 10em;
}
.formLayout label {
    float: left;
    text-align: right;
    width: 10em;
}
.formLayout input {
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}
.formLayout br {
    clear: both;
}
​
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Monthly Balance Calculator</title>    
    <link href="monthly_balance.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="mbc_library.js"></script>
	<script type="text/javascript" src="monthly_balance.js"></script>
</head>

<body>
	<div id="content">
		<h1>Monthly Balance Calculator</h1>
		<br />
		<h2>Add Transaction</h2>
		<hr />
		<br />
		
		<div class="formLayout">
			<label for="date">Date:</label>
			<input type="text" name="date" id="date" />
			<br />
			<br />
			
			<label for="type">Type:</label>
			<select name="type" id="type">
					<option value="withdrawal">Withdrawal</option>
					<option value="deposit">Deposit</option>
			</select>
			<br />
					
			<label for="amount">Amount:</label>
			<input type="text" name="amount" id="amount"/>
			<br />
			<br />
			
			<label>&nbsp;</label>
			<input type="button" id="addTrans" value="Add Transaction" />
			<br />
		</div>
	
		<h2>Transactions</h2>
		<hr />
		<br />
		
		<textarea name="results" id="results" rows="10" cols="60" disabled="disabled">
		</textarea>
		<br />
		<br />
	
		<h2>Summary</h2>
		<hr />
		<br />
		
		<div class="formLayout">
			<label for="startBal">Starting Balance:</label>
			<input type="text" name="startBal" id="startBal"
				class="disabled" disabled="disabled"/>
			<br />
			<br />
			
			<label for="totalDep">Total Deposits:</label>
			<input type="text" name="totalDep" id="totalDep"
				class="disabled" disabled="disabled"/>
			<br />
			<br />
			
			<label for="totalWd">Total Withdrawals:</label>
			<input type="text" name="totalWd" id="totalWd"
				   class="disabled" disabled="disabled"/>
			<br />
			<br />
			
			<label for="endBal">Ending Balance</label>
			<input type="text" name="endBal" id="endBal"
				class="disabled" disabled="disabled"/>
			<br />
			<br />
		</div>
</body>
   
</html>
   
​

注意，我必须以相同的形式添加BOTH JS文件，因为这个网站只允许我粘贴两个，尽管事实上我在HTML页面添加了两个enter image description here

1 个答案:

答案 0 :(得分：0)

我认为这就是你所需要的。 请查看以下代码。

＆＃13;
＆＃13; 
var pad_left = function(text, width, pad) {  //sets up text area formatting
	var result = text.toString();
	while (result.length < width) {
		result = pad + result;
	}
	return result;  // populates text area
}

var pad_right = function(text, width, pad) { // sets up text area formatting
	var result = text.toString();
	while (result.length < width) {
		result = result + pad;
	}
	return result;  
}

var getResults = function(results) { // actual calculation functions 
	if (results.length == 0) {
		return "";
	}

	var balance = 2000;  / /actual format of text area
	var list = pad_right("Date", 12, " ");
	list += pad_right("Amount", 12, " ");
	list += pad_right("Running Balance", 15, " ") + "\n";
	list += pad_right("", 11, "-") + " ";
	list += pad_right("", 11, "-") + " ";
	list += pad_right("", 15, "-") + "\n";
	
	for (var i = 0; i < results.length; i++) {  // loop to calculate balances
 		var trans = results[i];
		list += pad_right(trans["date"], 12, " ");
		if(trans["type"] == "withdrawal") // withdrawal calculation
		{
			balance -= trans["amount"]
			list += "$" + pad_left( "-" + trans["amount"].toFixed(2), 11, " ") + " ";
		} else { //for Deposits
			balance += trans["amount"]
			list += "$" + pad_left( trans["amount"].toFixed(2), 11, " ") + " ";
		}
				
		list += "$" + pad_left(balance.toFixed(2), 14, " ") + "\n";		
	}
	return list;
}
var get_runningBalance = function(results) {  // function to calculate Running Balance
	var runningBalance = 0, amount;
	for (var i in results) {
		runningBalance =  startBal - "amount" ;
		runningBalance += parseInt(runningBalance.toFixed(2));
	}
	return runningBalance;
}

var get_startBal = function(transactions){ // fills Starting Balance
	return 2000;
}

var get_totalDep = function(transactions){  // function to calculate Total Deposits
	var totalDep = 0;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "deposit")
		{
			totalDep += trans["amount"]
		}
	}
	return totalDep;
}

var get_totalWd = function(transactions){ // function to calculate Total Withdrawals
	var totalWd = 0;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "withdrawal")
		{
			totalWd -= trans["amount"]
		}
	}
	return totalWd;
}

var get_endBal = function(transactions){ // function to calculate Ending Balance
	var balance = 2000;
	for(var i = 0; i < transactions.length; i++){
		var trans = transactions[i];
		if(trans["type"] == "withdrawal")
		{
			balance -= trans["amount"]
		} else { // Is Deposit
			balance += trans["amount"]
		}
	}
	return balance.toFixed(2);
}​

// sets up the global variables and arrays for the functions
var balances = [];
var transactions = [];

var $ = function (id) {
    return document.getElementById(id);
}
// pulls the info from text boxes
var update_display = function() {
	$("startBal").value = get_startBal(transactions);
	$("totalDep").value = get_totalDep(transactions);
	$("totalWd").value = get_totalWd(transactions);
	$("endBal").value = get_endBal(transactions);
	
	$("date").value = "";
	$("amount").value = "";
	
	$("date").focus();
	
	$("results").value = getResults(transactions);
}
// function to add transactions to the text area 
var addTrans_click = function () {
	var trans = [];
	trans["date"] = $("date").value;
	trans["amount"] = parseFloat($("amount").value);
	trans["type"] = $("type").value;
	
	if (trans["date"] == "") return;
	if (isNaN(trans["amount"])) return;
		
	transactions.push(trans);
	update_display(); 
}
// the event handlers 
window.onload = function () {
	$("addTrans").onclick = addTrans_click;
	$("date").focus();
}​
＆＃13; 
body {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-family: Arial,Helvetica,sans-serif;
}
#content {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 8px solid gray;
    margin: 10px auto;
    padding: 5px 20px;
    text-align: center;
    width: 600px;
}
h1, h2 {
    text-align: left;
}
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
label {
    display: block;
    float: left;
    text-align: right;
    width: 10em;
}
input {
    display: block;
    float: left;
}
select {
    display: block;
    float: left;
    text-align: center;
    width: 10em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}
.formLayout label {
    float: left;
    text-align: right;
    width: 10em;
}
.formLayout input {
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}
.formLayout br {
    clear: both;
}
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Monthly Balance Calculator</title>    
    <link href="monthly_balance.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="mbc_library.js"></script>
	<script type="text/javascript" src="monthly_balance.js"></script>
</head>

<body>
	<div id="content">
		<h1>Monthly Balance Calculator</h1>
		<br />
		<h2>Add Transaction</h2>
		<hr />
		<br />
		
		<div class="formLayout">
			<label for="date">Date:</label>
			<input type="text" name="date" id="date" />
			<br />
			
			<label for="type">Type:</label>
			<select name="type" id="type">
					<option value="withdrawal">Withdrawal</option>
					<option value="deposit">Deposit</option>
			</select>
			<br />
					
			<label for="amount">Amount:</label>
			<input type="text" name="amount" id="amount"/>
			<br />
			
			<label>&nbsp;</label>
			<input type="button" id="addTrans" value="Add Transaction" />
			<br />
		</div>
	
		<h2>Transactions</h2>
		<hr />
		<br />
		
		<textarea name="results" id="results" rows="10" cols="60" disabled="disabled">
		</textarea>
		<br />
		<br />
	
		<h2>Summary</h2>
		<hr />
		<br />
		
		<div class="formLayout">
			<label for="startBal">Starting Balance:</label>
			<input type="text" name="startBal" id="startBal"
				class="disabled" disabled="disabled"/>
			<br />
			
			<label for="totalDep">Total Deposits:</label>
			<input type="text" name="totalDep" id="totalDep"
				class="disabled" disabled="disabled"/>
			<br />
			
			<label for="totalWd">Total Withdrawals:</label>
			<input type="text" name="totalWd" id="totalWd"
				   class="disabled" disabled="disabled"/>
			<br />
			
			<label for="endBal">Ending Balance</label>
			<input type="text" name="endBal" id="endBal"
				class="disabled" disabled="disabled"/>
			<br />
		</div>
</body>
   
</html>
   
​
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题