第7章 HTML基础学习-JAVA编码实践-JS DOM和BOM操作实践

本文链接：https://blog.youkuaiyun.com/qq_36346496/article/details/80377029

本文介绍了一个简单律师事务所计费系统的实现，通过Java程序自动计算咨询费用并打印账单。同时，展示了几个HTML示例，包括DOM操作、按钮创建及购物清单费用计算等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以一个小小简单的律师事务所收费工程为例子，完成实验：

程序代码：

bill.java

/**
 * @工  程   名:DemoPrj-20180519
 * @文  件   名:Bill.java
 * @工具包名:edu.funu.soft.training
 * @功能描述:TODO
 * @创  建   人:周开伦
 * @创建时间:2018年5月19日 下午2:31:20
 * @版本信息:V1.0
 */
package edu.funu.soft.training;

/**
 * @类名:Bill
 * @功能描述:消费账单类
 * @作者信息:Zhou kailun
 * @创建日期:2018年5月19日 下午2:31:20
 * @修改备注:
 */
public class Bill {
	/** 计费标准:（每刻钟）  */
	private static final int FEE_PER_QUARTER=150; 
	/** 咨询小时数 */
	private int hours;
	/** 咨询分钟数 */
	private int mins;
	/**
	 * @方法名:calc
	 * @功能描述:计算账单  
	 * @throws:
	 * @see   :
	 */
	private int calcFee()
	{
		return this.getCostTime()/15*FEE_PER_QUARTER;
	}
	/**
	 * @方法名:getCostTime
	 * @功能描述:获得计费分钟数  
	 * @return 
	 * @throws:
	 * @see   :
	 */
	private int getCostTime()
	{
		int actualTime=this.hours*60+this.mins;//实际时间
		if(actualTime<0)//如果输入实际实际分钟数出现负数，则按照0处理;
		{
			actualTime=0;
		}
		return (actualTime>0 && actualTime<15)?15:(actualTime/15)*15;
	}
	
	/**
	 * @方法名:获得免费时间 
	 * @功能描述: dfsasdfasdfasd
	 * @return 
	 * @throws:
	 * @see   :
	 */
	private int getFreeTime()
	{
		int actualTime=this.hours*60+this.mins;
		return actualTime-this.getCostTime()>0?(actualTime-this.getCostTime()):0;
	}
	/**
	 * @方法名:打印账单
	 * @功能描述:  fasdfasdfasd
	 * @throws:
	 * @see   :
	 */
	public void print()
	{
		StringBuilder sb=new StringBuilder();
		sb.append(
		String.format("您总共咨询话费%d小时%d分钟，先按照%d小时%d分钟计费，最后%d分钟免费\n",
				this.hours,this.mins,
				this.getCostTime()/60,
				this.getCostTime()%60,
				this.getFreeTime())
		);
		sb.append(">>>>   天津律师事务所-收费单     <<<<\n");
		sb.append("收费标准：").append(this.FEE_PER_QUARTER).append("元/一刻钟\n");
		sb.append("消费时间：").append(this.getCostTime()).append("分钟，共").append(this.getCostTime()/15).append("刻钟");
		sb.append("缴费金额:").append(this.calcFee()).append("元。\n\n");
		sb.append("感谢你的支持!");
		
		System.out.println(sb.toString());
	}
	
	/**
	 * <p>Title:</p>
	 * <p>Description:无参构造函数</p> 
	 */
	public Bill() {
		// TODO Auto-generated constructor stub
	}
	/** 
	 * <p>Title:</p>
	 * <p>Description:有参构造函数</p>
	 * @param hours：小时数
	 * @param mins：分钟数
	 */
	public Bill(int hours,int mins)
	{
		super();
		this.hours=hours;
		this.mins=mins;
	}
}

BillTest.java 测试代码：

/**
 * @工  程   名:DemoPrj-20180519
 * @文  件   名:BillTester.java
 * @工具包名:edu.funu.soft.training
 * @功能描述:TODO
 * @创  建   人:周开伦
 * @创建时间:2018年5月19日 下午2:34:34
 * @版本信息:V1.0
 */
package edu.funu.soft.training;

import java.util.Scanner;

/**
 * @类名:BillTester
 * @功能描述:测试类
 * @作者信息:Zhou kailun
 * @创建日期:2018年5月19日 下午2:34:34
 * @修改备注:
 */
public class BillTester {

	/**
	 * <p>Title:</p>
	 * <p>Description:</p> 
	 */
	public BillTester() {
		// TODO Auto-generated constructor stub
	}

	/**@方法名:main
	 * @功能描述:TODO  
	 * @param args 
	 * @throws:
	 * @see   :
	 */
	public static void main(String[] args) {
		int hour,min;
		Scanner scanner=new Scanner(System.in);
		System.out.println("==========欢迎来到天津律师事务所=========");
		System.out.println("请输入咨询时间:");
		hour=scanner.nextInt();
		System.out.println("分钟:");
		min=scanner.nextInt();
		Bill bill=new Bill(hour,min);
		bill.print();

	}

}

HTML DOM的一些操作：

setLength.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Set Length</title>
	<script type="text/javascript">
		// 增加文本输入框的长度方法
		function increaseLength(){
			var stuname=document.getElementById("stuname");
			// alert(stuname);
			stuname.size+=2;
		};
	</script>
</head>
<body>
	<input type="text" id="stuname" size="20">
	<br>
	<button onclick="increaseLength();">增加文本输入框长度</button>
</body>
</html>

createBtn.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>create Button</title>
	<style>
		button{
			margin-right:10px;
		}
	</style>
	<script type="text/javascript">
		var i=1;
		function createBtn(){
			
			var btnObj=document.createElement("BUTTON");
			btnObj.innerHTML="按钮"+(i++);
			btnObj.onclick=function(){
				alert(this.innerHTML);
			};
			document.body.appendChild(btnObj);

		}

	</script>
</head>
<body>
	<button onclick="createBtn();">创建按钮</button>
	<hr>
</body>
</html>

calcFee.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>calc Fee</title>
	<style type="text/css">
		.resultStyle{
			color:blue;
			font-size:26px;
		}
		.priceStyle{
			color:pink;
			font-size:30px;
		}
		div{
			

		}
	</style>
	<script type="text/javascript">
		function calc(){
			//1.定位
			var select=document.getElementsByTagName("SELECT")[0];
			var goodsInfo="";
			var totalPrice=0.0;
			// alert(select.options.length);
			for(var i=0;i<select.options.length;i++){
				// alert(select.options[i].text+"->"+select.options[i].value);
				goodsInfo+=select.options[i].text+","
				totalPrice+=parseFloat(select.options[i].value);
			}
			// alert(goodsInfo);
			var resultObj=document.createElement("DIV");
			var totalPriceObj=document.createElement("DIV");
			resultObj.innerHTML=goodsInfo;
			totalPriceObj.innerHTML="<br>总价格是:"+String(totalPrice);
			resultObj.className="resultStyle";
			totalPriceObj.className="priceStyle";
			document.body.appendChild(resultObj);
			document.body.appendChild(totalPriceObj);
		}
	</script>
</head>
<body>
	<DIV>购物清单</DIV>
	<select id="goodList">
		<option value="1.2">土豆1.2</option>
		<option value="2.2">西红柿2.2</option>
		<option value="3.2">西红柿3.2</option>
		<option value="4.2">土豆片5.2</option>
	</select>
	<button onclick="calc();">计算商品个数和费用</button>
	<hr>
</body>
</html>

HTML BOM的一些操作：

windows-work.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WIndows boms</title>
	<style type="text/css">
		
	</style>
	<script>
		var myWindow;
		function openWin()
		{
			// window.open("http://163.com");
			myWindow=window.open("","myWindow","width=200,height=100");
			myWindow.document.write("<p>this is 'myWindow'</p>");
		}
		//关闭新窗口
		function closeWin(){
			myWindow.close();
		}
	</script>
</head>
<body>
	<button onclick="openWin();">开启新窗口</button>
</body>
</html>

visit-websit.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>visit website</title>
	<script type="text/javascript">
		function visit(){
			var newUrl=document.getElementsByName("website")[0].value;
			alert(newUrl);
			location.href=newUrl;
		}
	</script>
</head>
<body>
	<label>Please input the websit you hope th visit:</label>
	<input type="text" name="website" value="www.baidu.com">
	<button onclick="visit();">Visit</button>
</body>
</html>

图解JS-HTML-内存对象：