demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getValue(id) {
return document.getElementById(id).value;
}
function setValue(id,value) {
document.getElementById(id).value = value;
}
function sortByAlpha() {
var src = getValue("src");
var a = new Array();
for(var i = 0;i < src.length;i++){
var c = src.charAt(i);
a.push(c);
}
a.sort();
var result1 = a.join("");
setValue("result1",result1);
a.reverse();
var result2 = a.join("");
setValue("result2",result2);
}
function sortByWord() {
var src = getValue("src");
var a = src.split(" ");
a.sort();
var result1 = a.join(" ");
setValue("result1",result1);
a.reverse();
var result2 = a.join(" ");
setValue("result2",result2);
}
</script>
<script>
function p(s,v) {
document.write(s + " " + v);
document.write("<br>")
}
</script>
<script>
var d = new Date();
document.write("new Date():" + d + "<br>");
</script>
<script>
var d = new Date();
p("年",d.getFullYear());
p("月",d.getMonth() + 1);
p("日",d.getDate());
p("時",d.getHours());
p("分",d.getMinutes());
p("秒",d.getSeconds());
p("毫秒",d.getMilliseconds());
</script>
<!-- 通過getDay()獲取，今天是本週的第幾天-->
<!-- 與getMonth()一樣，返回值是基0的。-->
<script>
var d = new Date().getDay();
var weeks =new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
p("今天是：",weeks[d]);
</script>
<script>
var time = new Date().getTime();
p("從1970-1-1 08:00:00 到今天的毫秒數：",time);
</script>
<script>
var d = new Date();
p("現在的日期：",d);
d.setFullYear(2008);
d.setMonth(7);
d.setDate(8);
d.setHours(8);
d.setMinutes(8);
d.setSeconds(8);
d.setMilliseconds(8);
p("修改過後的日期爲：",d);
p("毫秒數：",d.getTime());
</script>
<script>
p("Math.round()",Math.round(-11.5));
</script>
<script>
function calc(){
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
var today = new Date();
var birthday = new Date();
birthday.setFullYear(year);
birthday.setMonth(month-1);
birthday.setDate(day);
var nowTime = today.getTime();
var birthTime = birthday.getTime();
var age = (nowTime - birthTime)/(1000*60*60*24*365);
age = Math.round(age);
document.getElementById("age").innerHTML = age;
}
</script>
<script>
document.write(Math.E);
document.write("<br>");
document.write(Math.PI);
document.write("<br>");
document.write(Math.abs(-1));
document.write("<br>");
document.write(Math.max(1,2,3,4));
document.write("<br>");
document.write(Math.min(1,2,4,5));
document.write("<br>");
document.write(Math.pow(3,3) + "<br>");
p("Math.round():",Math.round(3.4));
p("Math.round():",Math.round(3.5));
p("0-1之間的隨機數：",Math.random());
for(i = 0;i < 10;i++){
var random = Math.random()*5 + 5;
p("5-10之間的隨機數：",random);
}
</script>
<!-- JavaScript自定義對象-->
<script>
var hero = new Object();
hero.name = "蓋倫";
hero.kill = function () {
document.write(hero.name + "正在砍殺！<br>" );
}
hero.kill();
</script>
<!-- 通過new Object創建對象有個問題，就是每創建一個對象，都得重新定義屬性和函數。這樣代碼的重用性不好-->
<!-- 那麼，採用另一種方式，通過function設計一種對象。 然後實例化它 。-->
<!-- 這種思路很像Java裏的設計一種類，但是 javascript沒有類，只有對象，所以我們叫設計一種對象-->
<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在砍殺！");
document.write("<br>")
}
}
var gareen = new Hero("蓋倫");
gareen.kill();
var timo = new Hero("提莫");
timo.kill();
// 現在Hero對象已經設計好了，但是我們發現需要追加一個新的方法keng(),那麼就需要通過prototype實現這一點
Hero.prototype.keng = function () {
document.write(this.name + "正在坑隊友！<br>")
}
timo.keng();
</script>
</head>
<body>
<table>
<tr>
<td>隨機輸入英文字符串</td>
<td><textarea id = "src"> what is your name</textarea></td>
</tr>
<tr>
<td>正排序結果：</td>
<td><textarea id = "result1"> </textarea></td>
</tr>
<tr>
<td>倒排序結果：</td>
<td><textarea id = "result2"> </textarea></td>
</tr>
<tr>
<td><button onclick="sortByAlpha()">按照字母排序</button></td>
<td><button onclick="sortByWord()">按照單詞排序</button></td>
</tr>
</table>
<div>
請輸入出生年月日<br>
<select id = "year">
<script>
for(i = 1900;i < 2020;i++){
document.write("<option value = " + i + ">" + i + "</option>")
}
</script>
</select>
年
<select id = "month">
<script>
for(i = 1;i<13;i++){
document.write("<option value = " + i + ">" + i+ "</option>")
}
</script>
</select>
月
<select id = "day">
<script>
for(i = 1;i < 32;i++){
document.write("<option value = " + i + ">" + i + "</option>")
}
</script>
</select>
日
<br>
<button onclick = "calc()">計算年齡</button>
<br>
今年<span id = "age">100</span> 歲
</div>
</body>
</html>
