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>
