HTML 网页，按照题目内容，编写1个HTML网页。详细在图里，求HTML、CSS 和 JavaScript代码，急用
（如图所示,内容以英文为准。图1-3是任务内容，图4-5是任务内容的中文翻译）
按照题目要求编写的利率计算的HTML程序如下
要求compound-interest.css文件,compound-interest.js文件,compound-interest.html文件放在同一文件夹中.
下面是compound-interest.html文件
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<title>Calculator</title>
<h1>Compound Interest Calculator</h1>
<link rel="stylesheet" type="text/css" href="compound-interest.css"/>
<script src="compound-interest.js"></script>
</head>
<body>
Author: Mike<br/>
Student ID: 12345678d<br/>
<br/>
<table>
<tr><td>Initial deposit:</td>
<td><input type="text" id="deposit"/></td></tr>
<tr><td>Annual interest rate:</td>
<td><input type="text" id="rate"/>%</td></tr>
<tr><td>Years to grow:</td>
<td><input type="text" id="years"/></td></tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2><input type="button" id="calculate" value="Calculate">
</td></tr>
<tr><td colspan=2> </td></tr>
</table>
<table border="1px" id="disTab" style="display:none"></table>
</body>
</html>
下面是compound-interest.css文件
h1{color:blue;}
下面是compound-interest.js文件
$(document).ready(function(){
$("#calculate").click(function(){
if(parseFloat($("#deposit").val())<0){
alert("deposit could not be negative");
$("#deposit").focus();
return false;
}
if(parseFloat($("#rate").val())<0){
alert("rate could not be negative");
$("#rate").focus();
return false;
}
if(parseInt($("#years").val())<0){
alert("years could not be negative");
$("#years").focus();
return false;
}
var deposit=parseFloat($("#deposit").val());
var rate=parseFloat($("#rate").val());
var years=parseInt($("#years").val());
var str=$("<tr></tr>").appendTo($("#disTab"));
str.append("<th>Year</th><th>Starting Value</th>");
str.append("<th>Interest Earned</th><th>Ending Value</th>");
var start=deposit;
var earned,end;
for(var i=1;i<=years;i++){
earned=start*rate/100;
end=start+earned;
str=$("<tr></tr>").appendTo($("#disTab"));
str.append("<td>"+i+"</td><td>"+start.toFixed(2)+"</td>");
str.append("<td>"+earned.toFixed(2)+"</td><td>"+end.toFixed(2)+"</td>");
start=end;
}
$("#disTab").show();
});
});
https://zhidao.baidu.com/question/1869591738754101307.html?entry=qb_uhome_tag
请问这题会不会？麻烦了。
（如图所示,内容以英文为准。图1-13是任务内容，图14-16是任务内容的中文翻译）
希望是全部代码都贴上来，这样参考容易些，谢谢。
Task 2:
Create a web page named compass.html that displays E (for east), S (for south), N (for north), and W (for west) as shown below and asks the user to rearrange the four directions so they are positioned correctly for a compass.
（图）
1. To achieve the proper layout for the direction letters and bidirectional arrows, use the CSS display property with table values.
2. Initially, the positions of the four direction letters are just random when the page has been loaded, and the text controls and the Update button are disabled.
3. When the user clicks the Choose button, the four direction letters are erased, and the text controls and Update button are activated.
4. When the user clicks the Update button, the text control values are copied to the direction letters, and the text controls and Update button are disabled. Note that you need to verify the user input, and please refer to the steps 7 and 8 in sample session.
5. Show both of your name and student id in the page.
6. Use separated CSS and JavaScript documents, namely compass.css and compass.js respectively.
7. Put these documents in your local web server and request this page by entering a valid URL
Sample Session
1. When this page has been loaded, positions of the direction letters N, S, E, and W should be shown randomly.
（图）
Question: How do you set the positions of four direction letters randomly? Please briefly illustrate your solution here.
2. After pressing the bottom-right arrow:
（图）
3. After pressing the left-right arrow:
（图）
4. After pressing the up-left arrow:
（图）
5. After pressing the Shuffle button, positions of the direction letters N, S, E, and W are set randomly. The Shuffle button should randomly shuffle the positions of the direction letters N, S, E, and W.
（图）
6. After pressing the Choose button, the four direction letters are erased, and the text controls and Update button are activated.
（图）
7. When pressing Update button, you must have entered four direction letters, otherwise there will be an alert.
（图）
8. When pressing Update button, any two direction letters cannot be the same, otherwise there will be an alert.
（图）
9. After pressing Update button with four different direction letters, the text control values are copied to the direction letters, and the text controls and Update button are disabled.
（图）
Hints:
1. To rotate the top-left and bottom-right arrow buttons, use the following CSS selector with the transform property:
transform: rotate(-45deg);
We did not cover the CSS transform property. To learn about it, google "css transform property".
2. To disable an HTML element, you can use the following method:
setAttribute("disabled","disabled");
To activate an HTML element, you can use the following method:
removeAttribute("disabled");
3. Execute a JavaScript immediately after a page has been loaded, you can add an event handler to tag like this:
Don’t forget to implement the function myFunction() in your .js file.
全部都在上面了，内容已英文为准。要参考图里的Sample Session来做