定时器和bom

102 阅读1分钟

定时器

        /* document.getElementById('guangao').style.display = 'block' */
        // setTimeout(function(){
        //     document.getElementById('guangao').style.display = 'none' 
        // },3000)

        /* 过个一段时间去做一件事 */
        /* 定时器 */
        /* 定时器会返回一个唯一的id */
        // let id = setInterval(function(){
        //     console.log('我爱js<br>');
        //     console.log(id);
        // },1000)

        // /* 根据定时器返回的唯一的id 来清除定时器 */
        // function clearfn(){
        //     clearInterval(id)
        // }


        /* 过一秒钟 在控制台上打印出 一个数字 比如1
        再过一秒钟 打印出2 ....
        点击清除定时器 终止打印 */


        // let i = 0;

        // let id = setInterval(function () {
        //     i++;
        //     console.log(i);
        // }, 1000)

        // function clearfn() {
        //     clearInterval(id)
        // }

        /*  setTimeout 和 setInterval的区别是
        setTimeout只执行一次 */
        /* 也会产生一个唯一的id标识 */
        /* let id = setTimeout(function (){
            console.log('我说冷笑话');
        },1000) */

缓存

    <button onclick="fn2()">显示sessionStorage中name的值</button> -->
    <button onclick="fn1()">设置localStorage</button>
    <button onclick="fn2()">显示localStorage的值</button>
    <script>
        /* sessionStorage 存储之后 页面刷新 缓存的值不会消失
        但是 把tab页 或者叫 会话 关闭之后,缓存的值就不存在了 */
        // function fn1(){
        //     /* setItem设置 存储 */
        //     /* sessionStorage.setItem('name','zhangsan') */
        //     sessionStorage.name = 'zhangsan';
        // }
        // function fn2(){
        //     /* getItem获取 */
        //     // let v = sessionStorage.getItem('name');
        //     // document.write(v);
        //     document.write(sessionStorage.name);
        // }

        /* 设置和取值 使用两种方式都试一下 */
        /* 点击按钮 设置一个学生信息  学号 stuNo  语文成绩 chinese
        存到sessionStorage缓存中,再点击按钮 可以在页面显示出学生的学号 
        和语文成绩 ,最后把tab关闭,再次打开页面看值之后还存在 */

        // function fn1(){
        //     // sessionStorage.stuNo = '1908'
        //     // sessionStorage.chinese = '90'
        //     sessionStorage.setItem('stuNo','1099')
        //     sessionStorage.setItem('chinese','80')
        // }
        // function fn2(){
        //     // document.write(sessionStorage.stuNo);
        //     // document.write(sessionStorage.chinese);
        //     document.write(sessionStorage.getItem('stuNo'));
        //     document.write(sessionStorage.getItem('chinese'));
        // }

        /* localStorage会一致存储在本地,会话或者tab页关闭也不会消失  */
        /* localStorage是和地址有关系的,地址改变了,localStorage里面的值就不存在了
        前面地址没有发生改变的话,localStorage依然存在 ,虽然页面改变了*/
        function fn1(){
           /* localStorage.setItem('car','bmw')   */
           localStorage.car = 'bc'
        }
        function fn2(){
            /* document.write(localStorage.getItem('car'));  */
            document.write(localStorage.car);
        }


        /* 在页面A 本地存储 一个username 到本地 使用两种方式 存储 
        再新建一个页面B 在A页面中点击一个a 链接 跳转到 B页面 
        ,看能否取到username 取值也使用两种方式
        都在本地打开 使用 open in default brower */
    </script>

bom

语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准 -->
    <script>
        /* 
        BOM:Browser Object Model(浏览器对象模型)
提供了独立于内容与浏览器窗口进行交互的对象
        */
        /* window.prompt('输入一个数') */

        /* console.log(window);
        window.alert(1) */
        /*  确认框	window.confirm()	用于验证是否接受用户操作 */
        /* let flag = confirm('你是最强王者吗');
        alert(flag) */
        /* 你是一个好学生吗?
        如果是 就alert出 继续加油
        如果不是 就alert出 我还要努力 */
        //   if( confirm('你是一个好学生吗?') ){
        //       alert('继续加油')
        //   }else{
        //     alert('我还要努力')
        //   }
        /* prompt的第二个参数是默认值 */
        // let v = prompt('今天你快乐吗','快乐')
        // alert(v)
        /* 这个是地址的参数信息 */
        // console.log(window.location.search);
        // /* 这是地址路径 */
        // console.log(window.location.href)
        // /* 这个是地址的端口 */
        // console.log(window.location.port)

        /* 后退 */
        function back() {
            /* window.history.back(); */
            /* 两者的作用一致 都是后退 */
            window.history.go(-1);
        }
        /* 前进 */
        function forward(){
            /* window.history.forward(); */
            window.history.go(1)
        }
        /* 刷新 */
        function go(){
            /* go里面是没有任何参数的 */
           /*  window.history.go(); */
            /* 两者功能相等 都是刷新 */
            /* window.history.go(0); */
            /* 这个也表示刷新 */
            location.reload();
        }
        /* 写个 前进 和后退  和刷新 的按钮 使用不同的方式  */


    </script>