宽容他人，放过自己。

JS快速创建

Posted on Jun 01, 2016 By anchoriteFili

引入css和js

<script src="leanCloud.js"></script>
<link rel="stylesheet" type="text/css" href="公会驻地.css">
1. 按钮点击事件的快速创建
　<!--
　常见的HTML事件
　onchange HTML元素的改变
　onclick	用户点击HTML元素
　onmouseover	用户在一个HTML元素上移动鼠标
　onmouseout	用户从一个HTML元素上移动鼠标
　onkeydown	用户按下键盘按钮
　onload	浏览器已完成页面的加载	
　-->


<!--按钮点击事件，修改外部元素事件-->
<button onClick="getElementById('demo').innerHTML = Date()">现在的时间是？</button>

<!--修改自己元素事件-->
<button onClick="this.innerHTML = Date()">现在的时间是？</button>

<!--通过函数执行点击事件-->
<button onClick="displayDate()">现在的时间是？</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
2. 对象方法的创建
<p id="demo"></p>

<!--
对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加()调用（作为一个函数）
-->
<script>
var person = {
    firstName: "jone",
    lastName: "Doe",
    id:    5566,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
<!--调用对象方法，调用对象方法的时候，key值后面加()-->
document.getElementById("demo").innerHTML = person.fullName();
</script>
3. 警告栏的创建
<!--使用window.alert()-->
<script>
window.alert(5 + 6);
</script>
4. 修改文字内容
<!--
操作HTML元素
getElementById("demo")是使用id属性来查找HTML元素的JavaScript代码
innerHTML = "段落已修改"。用于修改元素的HTML内容的JavaScript代码
-->
<script>
document.getElementById("demo").innerHTML = "修改段落";
</script>
5. 向文档输出写内容
<!--
写到HTML文档
document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。
-->
<script>
document.write(Date());
</script>

<!--添加按钮点击，添加时间的时候直接覆盖了整个页面，白屏只显示时间-->
<button onClick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>
6. 写到控制台
<!--
写到控制台
如果您的浏览器支持调试，你可以使用console.log()方法在浏览器中显示
JavaScript值。
浏览器中使用F12来启用调试模式，在调试窗口中点击"Console"菜单。
-->
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
7. switch快速创建
<script>
function todayDate() {
    var day = new Date().getDay();
    switch (day) {
        case 0:
        x = "Sunday";
        break;
        case 1:
        x = "Monday";
        break;
        case 2:
        x = "Tuesday";
        break;
        case 3:
        x = "wednesday"
        break;
        case 4:
        x = "Thursday"
        break;
        case 5:
        x = "Friday"
        break;
        case 6:
        x = "Stauurday"
        break;
        default:
        x = "you are a shaBi"
    }
    document.getElementById("demo").innerHTML = x
}
</script>

<body> 
<p id="demo"></p>
<button onClick="todayDate()">获取日期</button>
8. for循环的快速创建
<script>    
/*
for (语句1； 语句2； 语句3）{
    被执行的代码块
}
通常我们会使用语句1初始化循环中所用到的变量
语句1是可选的，也就是说不使用语句1也可以。
您可以在语句1中初始化任意多个值
*/
cars = ["现代", "吉普", "甲壳虫"];
for (var i = 0; i < cars.length; i ++) {
    document.write("<br>" + cars[i]);
}

// 语句1初始化多个值
for (var i = 0, l = cars.length; i < l; i ++) {
    document.write("<br>" + cars[i]);
}

// 语句1省略
var i = 0, len = cars.length
for (; i < len; i ++) {
    document.write("<br>" + cars[i]);
}

// 语句3省略，将语句3放入到内部
for (var i = 0, l = cars.length; i < l; ) {
    document.write("<br>" + cars[i]);
    i ++;
}

</script>
9. for/in遍历
<script>
function personInfo() {
    
    var txt = "";
    var person = {fname: "Bill", lname: "Gates", age: 57}
    
    for (var x in person) {
        txt += person[x];
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
10. break和conntinue语句标签
<script>
/*
可以对JS语句进行标记，如需标记JS语句，请在语句前添加冒号：
continue 语句（带有或不带标签引用）只能用在循环中
break 语句（不带标签引用），自能用在循环或switch中
通过标签引用，break语句可用于跳出任何JS代码块
*/

cars = ["现代", "红旗", "别克"];
list: { //加个冒号，形成代码kuai
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list; //直接跳出代码块
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

</script>
11. typeof的使用

<script>
document.getElementById("demo").innerHTML = 
typeof "john" + "<br>" + 
typeof 3.14 + "<br>" + 
typeof false + "<br>" +
typeof [1, 2, 3, 4] + "<br>" + 
typeof {name: 'john', age: 34};
</script>

##### 12. 字符串和数字的转换

String(x); // 将变量x转换为字符串并返回
String(123); //将数字123转换为字符串并返回
String(100 + 23) //将数字表达式转换为字符串并返回
x.toString() // 同样效果
false.toString() // 布尔值转换为字符串
true.toString() //布尔值转换为字符串
Date().toString() //将时间转化为字符串

Number("3.14") // 字符串转化为数字
Number(false) // 布尔值转换为数字
Number(true) // 布尔值转换为数字
d = new Date();
Number(d) // 将日期转化为数字
d.getTime() // 有同样的效果
13. 正则表达式
 function zhengZe() {
     var str = "Visit W3Cschool";
     var n = str.search(/W3Cschool/i);
     // 返回起始位置
     document.getElementById("demo").innerHTML = n;
 }
 
function zhengZeReplace() {
    var str = "Visit Microsoft";
    var res = str.replace(/Microsoft/i, "w3cschool")
    document.getElementById("demo").innerHTML = res
    
}

test() 方法用于检测一个字符串时候匹配摸个模式，如果字符串中含有匹配的
文本，则返回true，否则返回false.
*/
var patt = new RegExp("e");
document.write(patt.test("The best things in life are free")); //返回true
// 可以这样直接测试
document.write(/e/.test("The best things in life are free"));
14. JS错误 try/catch/throw
<button onClick="throwTest()">自定义抛出异常</button>
<p id="demo"></p>

<script>
/*
JS错误
try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义错误
*/
var text = "";
function message() {
    try {
        // 方法错误，直接抛出错误
        adddlert("Welcome guest!");
    } catch(err) {
        txt = "本页脚本有错误。\n\n";
        txt += "错误描述：" + err.message + "\n\n";
        txt += "点击确定继续。\n\n";
        alert(txt);
    }
}

/*
throw语句允许我们创建爱你自定义错误。
正确的技术术语是：创建或抛出异常(exception)
如果把throw与try和catch一起使用，那么您能够控制程序流，并生成自定义的
错误信息。

*/
function throwTest() {
    try {
        var x = document.getElementById("demoOne").value;
        if (x == "") throw "值为空";
        if (isNaN(x)) throw "不是数字";
        if (x > 10) throw "太大";
        if (x < 5) throw "太小";
        // throw方法执行，直接跳到err部分
        document.getElementById("demo").innerHTML = x
    } catch(err) {
        document.getElementById("demo").innerHTML = "错误：" + err + "。";
    }
}

</script>
<br>
<p>请输出一个5到10之间的数字：</p>
<input id="demoOne" type="text">
<button type="button" onClick="throwTest()">测试输入</button>
<p id="mess"></p>