潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)

上节补充方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>

        //  toString  转换为字符串
        var a = 123.456;
        var b = a.toString();
        console.log(a,typeof a);        //  123.456 "number"
        console.log(b, typeof b);       //  123.456 string

        //  toFixed
        var c = a.toFixed(2);           // 转换为小数，保留后两位小数，
        console.log(c, typeof c);       //123.46 string
        var d = a.toFixed();           // 转换为小数，
        console.log(d, typeof d);       //123 string

        //parseFloat   parseFloat
        var e = '112345.1b3';
        var f = '112g45.123';
        console.log(parseInt(e));       // 112345   整数
        console.log(parseInt(f));       // 112      整数
        console.log(parseFloat(e));       // 112345.1      浮点数
        console.log(parseFloat(f));       // 112       浮点数

        //    Number  字符串转数字
        var j = '333.1215';
        console.log(j,typeof j);                        //  333.1215 string
        console.log(Number(j),typeof Number(j));        // 333.1215 "number"
        // console.log(Number(f),typeof Number(fj));        // 333.1215 "number"

        // 判断 是否为数字，不是反回 false ，是返回 true
        var cc = 123;
        console.log(isNaN(toString(cc)));            //   true
        console.log(isNaN(cc));                       //  false

        // Array.isArray  判断 是否是数组，
        var arr = [1,2,3];
        console.log(Array.isArray(arr))             // true
    </script>
</body>
</html>

　　

数学对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        //四舍五入
        console.log(Math.round(123.456));           //123
        console.log(Math.round(123.666));           //124

        //向下取整
        console.log(Math.floor(123.456));           //123
        console.log(Math.floor(123.666));           //123
        //向上取整
        console.log(Math.ceil(123.456));           //124
        console.log(Math.ceil(123.666));           //124

        // 随机数，    取值在0-1间
        console.log(Math.random());
        console.log(Math.random()*10);
    </script>
</body>
</html>

　　

日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        // 创建时间对象
        var time = new Date();
        console.log(time) ;      // Wed Aug 08 2018 05:23:56 GMT+0800 (中国标准时间)

        // 时间戳
        console.log(time.getTime())  ;       //1533677373265
        //  年 月 日 时 分  秒

        var year = time.getFullYear();          // 年
        var month = time.getMonth()+1;            // 月
        var data = time.getDate();              // 日
        var hour = time.getHours();             // 时
        var minute = time.getMinutes();         // 分
        var ss = time.getSeconds();          // 秒

        document.body.innerText = year +'年'+ month + '月' + data + '目'+ hour + '时' + minute + '分' + ss +
            '秒'

    </script>
</body>
</html>

　　

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>
        清除定时器
    </button>

    <script>
        // 只执行一次
        // setTimeout(function () {
        //     console.log('ok');
        // },1000);                        ///  以毫秒为单位
        function fu() {
            console.log('ok');
        }
        setTimeout(fu,1000);

        //  循环执行
        // setInterval(function () {
        //     console.log('ok');
        // } , 500)
        function fo() {
            console.log('ok');
        }
        // setInterval(fo,500);

        var sl = setInterval(fo,500);           //  如果要清除，那么这个定时器必须有个名字
        var bnt = document.getElementsByTagName('button')[0];
        bnt.onclick = function () {
            clearInterval(sl);
        }
    </script>
</body>
</html>

　　

定时器的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: #131313;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h4>敌军还有<span>3</span>秒到达战场</h4>

    <script>
        var se = document.getElementsByTagName('span')[0];
        var m = se.innerText;
        // 创建 一个秒数递减的函数

        // function ji() {
        //     m -= 1;
        //     se.innerText = m;
        // }
        function ji() {
            if (m==0){
                clearInterval(sl);
                var h = document.getElementsByTagName('h4')[0];
                h.innerText = '全军到达战场'
            }
            else {
                m -= 1;
                se.innerText = m;
            }
        }

        var sl = setInterval(ji,1000);

    </script>
</body>
</html>

　　

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        // f1();
        //定义函数
        // 有名函数
        // function f1() {
        //     console.log('ok')
        // }
        // f1();

        // 匿名函数
        // box.onclick=function () {
        //     console.log('ok')
        // };

        // 匿名函数 的执行，只有在匿名函数转为函数表达式时才能被执行，
        // (function () {
        //     console.log('aa')
        // })();

        // +function () {
        //     console.log('aa')
        // }();

        // 函数参数
        function na(x,y,z) {    // x,y，z
            var a = x+y+z;
            console.log(a);
        }
        na(1,3,2)      ;    //  1,3,2,是实参

        // arguments 传参
        var s=0;
        function nb() {
            console.log(arguments)
            for (var i=0; i<arguments.length i++){
                s += arguments[i];
                console.log(s);
                return s;
            }
        }

        nb(1,2,3,45,6,7,8,,9,a,b,c,)

    </script>

</body>
</html>

　　

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            height: 300px;
            width: 440px;
            border: 2px solid yellow;
            background:url("22.png");
            margin: 50px auto;
            position: relative;
        }
        h4{
            height:50px;
            width: 180px;
            position: absolute;
            top: 100px;
            left: 130px;
        }
        h5{
            height:50px;
            width: 440px;
            font-size: 18px;
            position: absolute;
            top: 170px;
            left: 20px;
        }
        .b{
            font-size: 15px;
            color: skyblue;
        }
        #mm{
            color: red;
            font-size: 50px;
            font-weight: revert;
        }
        .c,.d,.e,.f{
            font-size: 26px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="a">
        <h4>敌军还有<span id="mm">3</span>秒到达战场</h4><br><br>
        <h5><span class="b">现在是北京时间</span>
            <span class="c"></span>
            <span class="b">年</span>
            <span class="d"></span>
            <span class="b">月</span>
            <span class="e"></span>
            <span class="b">日</span>
            <span class="f"></span>
        </h5>
    </div>

    <script>
        var  se = document.getElementById('mm');
        var h = document.getElementsByTagName('h4')[0];
        var hh = document.getElementsByTagName('h5')[0];
        var c = document.getElementsByClassName('c')[0];
        var d = document.getElementsByClassName('d')[0];
        var e = document.getElementsByClassName('e')[0];
        var f = document.getElementsByClassName('f')[0];
        var m = se.innerText;

        function ff(){
            m -= 1;
            se.innerText = m;
            if (m==0){
                clearInterval(s);
                h.innerText = '全面开战';
                h.style.color ='red';
                h.style.fontSize= '30px'
            }
        }
        function fu(){
            var time = new Date()
            var year = time.getFullYear();          // 年
            var month = time.getMonth()+1;            // 月
            var data = time.getDate();              // 日
            var hour = time.getHours();             // 时
            var minute = time.getMinutes();         // 分
            var ss = time.getSeconds();          // 秒
            var seconds = ss.toString();
            if (seconds.length==1){
                seconds = 0+seconds;
            }
            // hh.innerText = '现在是北京时间: '+year+' 年 '+month+' 月 '+data+' 日 '+hour+' : '+minute+' : '+ss
            c.innerText = year;
            d.innerText = month;
            e.innerText = data;
            f.innerText = hour + ';'+minute+ ':' +seconds;

        }

        var s = setInterval(ff,1000);
        setInterval(fu,10);
    </script>

</body>
</html>