JS 经典案例

1.显示时间

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //创建时间对象
        //var date = new Date();
        ////获取世界时间，会提示当前时区
        //alert(date.toString());
        ////获取当前时区的当前时间
        //alert(date.toLocaleString());
        
        //代码分离：一般不将html与js混合写
        //定义函数，用于获取时间对象并显示当前时间
        function showTime() {
            var date = new Date();
            alert(date.toLocaleString());
            return false;//可以让a的跳转不执行
        }
    </script>
    
    <input type="button" value="显示当前时间" onclick="showTime();"/>
    <hr/>
    点击超链接，执行js脚本，而不进行url跳转
    <br/>
    方式一：让js函数返回false,在onclick中也返回false;
        <a href="http://www.itcast.cn" onclick="return showTime();">显示当前时间</a>

    <br/>
    方式二：将href指定成一段脚本
    <a href="javascript:showTime();">点击显示时间</a>
    <br/>
</body>
</html>

View Code

2.方法的重载（求和）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //不存在方法重载
        //后声明的函数会将先声明的函数覆盖
        
        function add(a, b) {
            alert(a + b);
        }
        
        function add(a,b,c) {
            alert(a + b + c);
        }

        //add(1, 2);
        
        //可变参数
        function sum(a) {
            //使用arguments获取所有参数，是一个数组
            //alert(arguments.length);//返回数组的元素个数
            var sum1 = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum1 += arguments[i];
            }
            alert(sum1);
        }
        
        //调用
        sum(1, 2, 3,4,5,6);
    </script>
</body>
</html>

View Code

3.匿名函数

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
    <body>
         <input type="button" id="btnShow" value="显示"/>
        <script>
            
            //快捷键：fun,tab
            //定义匿名函数，赋值给一个变量
            var f1 = function(a, b) {
                alert(a+b);
            };   
            //通过变量调用
            //f1(1, 2);

            //典型应用：为事件绑定处理函数，传递回调函数
            //根据id获取页面元素，为它绑定单击事件
            document.getElementById('btnShow').onclick = function() {
                alert(123);
            };
        </script>
    
   
    </body>
</html>

View Code

4.闭包

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //定义一个函数show
        function show(name) {
            //返回一个函数
            return function () {
                //输出name的值
                alert(name);
            };
        }
        //运行show函数，将返回值赋给f1
        //因为返回值是函数，所以f1现在指向一个函数
        var f1 = show('a');
        //通过f1可以调用匿名函数执行
        f1();
        
        //闭包：支持在函数内部调用函数之前声明过的变量
        //作用域链：变量的作用域在当前函数中，及当前函数内部定义的函数中，形成了一个链条
        //建议：避免闭包，每次在用一个变量时，都要先声明再使用
    </script>
</body>
</html>

View Code

5.原型

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //原型：对象的类型

        function Person() {
            this.Age = 100;
        }

        var p1 = new Person();
        //p1.Title = 'abc';
        
        //访问原型
        p1.__proto__.Title = 'abc';//为原型注释数据成员
        //Person.prototype.Title = 'abc';//功能同上面的代码

        var p2 = new Person();
        alert(p2.Title);
    </script>
</body>
</html>

View Code

6.数组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //使用[]定义数组
        var array1 = [123, 'abc'];
        array1[0];

        //键值对{键:值,...}
        var array2 = {            
            name: 'zhh',
            age: 18,
            gender:'你猜'
        };
        //alert(array2['name']);//将array2认为是集合，通过键访问值
        //alert(array2.name);//将array2认为是json，通过属性访问值
        
        //定义json数组
        var temp = [{
            title: 'zhh',
            age:18
        }, {
            title: '牛头',
            age:20
        }, {
            title: '马面',
            age:22
        }];
        //输出每个对象的title值
        for (var index in temp) {//temp是数组，所以index是索引
            alert(temp[index].title);
        }
    </script>
</body>
</html>

View Code

7.不一样的调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        function f1() {
            alert('就是这么帅');
        }

        onload = function () {
            //document.getElementById('btn').onclick = f1;
            document.getElementById('btn').onclick = function () {
                alert('哈哈哈没想到吧');
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="按钮" onclick="f1();" />
    <input type="button" name="name" value="还是按钮" id="btn" />
</body>
</html>

View Code

8.对话框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //alert('123');
        //确认框，有"确定"、"取消"两个按钮
        //点击确认返回true,点击取消返回false
        //var result = confirm('确认要删除吗？');
        //alert(result);
        
        //输入框：有一个文本框，一个"确定"按钮，一个"取消"按钮
        //点确定则返回文本框中的值，点取消则返回null
        var result = prompt('请输入年龄','10');
        alert(result);
    </script>
</head>
<body>

</body>
</html>

View Code

猜你喜欢