JavaScript学习笔记整理Day9

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript学习笔记整理Day9相关的知识,希望对你有一定的参考价值。

一.javascript定时器:

  1.单次定时:setTimeout(fn,time);

  2.多次定时:setInterval(timer);

  3.停止单次定时:clearTimeout(timer);

  4.停止多次定时:clearInterval(timer);

实例1:使用单次和多次定时写倒计时

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            font-size: 80px;
            text-align: center;
            color:green;
        }
    </style>
</head>
<body>
    <h1>30</h1>
    <script>
        var h = document.getElementsByTagName(‘h1‘)[0];
        var num = parseInt(h.innerHTML);
        console.log(num);
        /*
        使用多次定时
        var timer = setInterval(function(){
            num--;
            if(num <= 0){
                num = ‘Game over!‘;
                clearInterval(timer);
            }
            h.innerHTML = num;
        },300);*/
        function show(){
            if(num <= -1){
                //设置css样式
                h.style.color = ‘red‘;
                h.innerHTML = ‘Game over!‘;
                return;
            }
            h.innerHTML = num;
            num--;
            setTimeout(show,100);
        }
        show();
        
    </script>
</body>
</html>

二.通过JavaScript获取或者修改元素的css样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式的获取和设置</title>
    <style>
        #box{
            width:600px;
            /* height:300px; */
            border:1px solid #ccc;
            line-height: 300px;
            font-size: 30px;
            /* color:green; */
            font-weight: 700;
        }
        #big{
            border:1px solid #000;
            width:300px;
            height:300px;
            background-color: green;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box" style=‘color:green;background-color:pink;height:300px‘>
        门前有条小河沟,很难过.
    </div>    
    <hr>
    <button onclick="show()">显示</button>
    <div id="big"></div>
    <script>
        //css属性的获取  要求属性写在标签的style中的
        //获取box的color属性
        var box = document.getElementById(‘box‘);
        console.log(box.style.color);
        //获取width
        console.log(box.style.width);
        console.log(box.style.height);
        //js设置css的样式
        box.style.backgroundColor = ‘#f00‘;
        box.style.fontSize = ‘35px‘;
        box.style.borderRadius = ‘10px‘;
        //设置显示隐藏
        var big = document.getElementById(‘big‘);
        //声明一个变量
        var flog = 0;
        function show(){
            if(flog == 0 ){
                big.style.display = ‘block‘;
                flog = 1;
            }else{
                big.style.display = ‘none‘;
                flog = 0;
            }    
        }
    </script>
</body>
</html>

三.命名介绍

  1.小驼峰命名:backgroundColor

  2.大驼峰命名:BackgroundColor

  3.匈牙利命名:background-color

四.数学运算

  1.document.write(Math);//书写运算对象

  2.document.write(Math.PI);//PI是数学对象的一个属性

  3.document.write(Math.abs(100.21));//绝对值

  4.document.write(Math.pow(2,4));//求次方2的4次方

  5.document.write(Math.sqrt(100));//开平方

    6.document.write(Math.round(100.21));//四舍五入

  7.document.write(Math.floor(100.21));//舍一取整

  8.document.write(Math.ceil(100.21));//进一取整

  9.document.write(Math.max(100.21,334,33,2));//求最大值

  10.document.write(Math.min(100.21,223,4,234));//求最小值

  11.document.write(Math.random());//取随机数0-1

  取优质随机数:

//求 0-15的随机数
        console.log(Math.floor(Math.random()*100000000000000) % 16);

五.Boolean对象:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boolean对象</title>
</head>
<body>
    <script>
        //布尔对象的声明方式
        //No1 直接量
            var bool = true;
        //No2  使用构造函数
            var boo = new Boolean(true);
        console.log(bool);
        console.log(boo);
        console.log(boo == bool); //true
        console.log(boo === bool);//false

        //属性
        //方法
        //No1. toString() 变成字符串
        console.log(bool.toString());

        //No2. valueOf()  返回布尔原始值  true|false
        console.log(‘true‘.valueOf());
        console.log(boo.valueOf());
    </script>
</body>
</html>

六.Number对象:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number对象</title>
</head>
<body>
    <script>
        //Number对象  100 1 2 3  
        //声明方式
        //No1  直接量  
        var index = 100;
        //No2 使用构造函数
        var myindex = new Number(10);
        //Number构造函数的属性
        //No1  js可表示的最大值
        console.log(Number.MAX_VALUE);
        //No2  js可表示的最小值
        console.log(Number.MIN_VALUE)
        //No3 NaN
        //Number对象的方法
        //No1  toString() 转换为指定的进制的字符串数字
        console.log(10..toString(2));
        console.log(typeof 10..toString(2)); //string
        console.log(255..toString(16));//FF
        //No2 toFixed()  转换为指定小数点位数的数字
        console.log(10000..toFixed(1));
        console.log(0.00002.toFixed(1)); //0-20
        //No3 toExponential()  科学计数法
        console.log(100000..toExponential());
        console.log(1234123..toExponential());
        //No4 toPrecision() 转换为指定长度的数字
        console.log(100000..toPrecision(4));
        console.log(1.123123123.toPrecision(5));//参数1-21
    </script>
</body>
</html>

七.String对象

  属性:length

  方法:

     1.charAt() //返回指定位置的字符

     2.concat() //连接字符串

    3.charCodeAt() //返回指定字符的unicode编码

    4.fromCharCode() //将unicode编码转为字符

    5.indexOf() //搜索指定字符(首次出现) 没有返回-1

    6.lastIndexOf() //从后往前搜索字符串

    7.slice() //字符串截取 start,end

    8.match() //正则

    9.search()

    10.str.replace

    11.substr() //截取字符串 start,length

    12.substring() //和slice用法相同

    13.toLowerCase() //转换为小写

    14.toUpperCase() //转换为大写

    15.split() //分割字符串

以上是关于JavaScript学习笔记整理Day9的主要内容,如果未能解决你的问题,请参考以下文章

python学习day9笔记

python day9 学习整理

DAY9关于多线程的学习笔记

JavaScript学习记录day9-标准对象

day9-Python学习笔记(二十)数据库备份,

day9-Python学习笔记(二十一)单元测试