HTML5的使用

最新推荐文章于 2021-06-23 22:16:16 发布

小熊陪你看月亮.

最新推荐文章于 2021-06-23 22:16:16 发布

阅读量208

点赞数

分类专栏： JavaScript 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_46670991/article/details/109261968

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

History对象是什么

History对象包含用户在刘览器中访问过的URL（网址）。

length属性: History对象的length属性可以获取用户在刚览器中访问网址的数量。
```
console.log('用户访问的网址数量为:'+history.length);
```

History对象还提供了以下方法实现刘览器前进和后退功能。

方法名称	描述
forward()	实现跳转下一个页面，作用和浏览器的前进拉钮—样
back()	实现转跳到上一个页面，作用和浏览器的回退按钮—样
go()	实现跳转到指定的页面。如果为负数表示后退，如果为正数表示前进

Location对象

Location对象是什么

Location对象包含了刘览器的地址栏中的信息，该对象主要用于获取和设置地址。
Location对象很特别，因为该对象既是Window对象的属性，又是Document对象的属性。

console.log(window.location == document.location);// true

Location对象的属性

Location对象不仅存储了地址栏中的信息，还提供了解析功能。可以通过不同的Location对象的属性访问不同的地址栏中的信息。

属性名称	描述
host	返回服务器名称和端口号
hostname	返回服务器名称
href	返回当前加载页面的完整URL
pathname	返回当前URL中的目录和文件名
port	返回当前URL中的端口号
protocol	返回页面使用的网络协议

获取和设置地址

通过可以获取和设置测览器的地址栏中的地址信息。

//获取当前浏览器窗口的地址栏信息
console.log('Location对象为: '+window.locatign);
//设置当前浏览器窗口的地址栏信息
window.location = 'http://www.change.tm/';

上述功能同样可以通过Location对象的href属性完成。

//获取当前浏览器窗口的地址栏信息
console.log('Location对象的href属性为: '+location.href);
//设置当前浏览器窗口的地址栏信息
location.href= 'http://www.change.tm/';

查询字符串参数

Location对象提供了search属性，用于返回URL包含的查询字符串。

//取得查询字符串并去掉开头的问号
var qs = location.search.length >o ? location.search.substring(1):'';

Location对象的方法

方法名称	描述
assign()	载入一个新的文档，作用和直接修改Location相同
reload()	重新载入当前文档，作用和刷新按钮一样。参数为true时，则会强制清空缓存刷新页面
replace()	用新的文档替换当前文档（不会生成历史记录，不能使用回退按钮回退）

定时器

定时器是什么

定时器的具体方法由Window对象提供，共有以下两种定时器:

延迟执行:指的是指定程序代码在指定时间后被执行，而不是立即被执行。
周期执行:指的是指定程序代码在指定时间为间隔，重复被执行。

目前，HTML页面中多数动态效果，以及动画效果等均由定时器内容完成。

延迟执行

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

var timeoutlD = scope.setTimeout(function/code[, delay]);

该方法的参数如下:

参数名称	描述
function/code	要调用的函数或要执行的代码
delay	延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0

该方法的返回值timeoutlD是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时。

案例说明：

<script>
        console.log('this is message...');

        /*
            setTimeout(function,delay)方法
            *作用 - 设置一个定时器
            *参数
                *function - 表示延迟执行的代码逻辑
                *delay - 表示延迟执行的时间，单位为毫秒
            *返回值 - 表示当前定时器的标识
            *注意 - 打乱代码默认的顺序执行流程
        */
        var t = setTimeout(function(){
            console.log('this is timeout...') //延迟
        },10000);

        //clearTimeout(t);//清除延迟

        console.log('this is message too...');
</script>

图示：

周期执行

setlterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

var timeoutlD = scope.setlnterval(function/code[, delay]);

该方法的参数如下:

参数名称	描述
function/code	要周用的函数或要执行的代码
delay	延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0

该方法的返回值timeoutlD是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时。

案例说明：

<script>
        console.log('this is message...');

        /*
            setInterval(function,delay)方法
            * 作用 - 设置一个周期执行的定时器
            * 参数
                * function - 表示延迟执行的代码逻辑
                * delay - 表示延迟执行的时间，单位为毫秒
            * 返回值 - 表示当前定时器的标识
        */
        /*setInterval(function(){
            console.log('this is interval...');
        },1000)*/

        //延迟执行实现周期执行
        /*function fun(){
            console.log('this is message too...');
            setTimeout(fun,1000);
        }
        fun();*/

        (function fun(){
            console.log('this is interval...');
            setTimeout(fun,1000);
            //setTimeout(arguments.callee,1000)
        })();

        console.log('this is message too...');
</script>

图示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2SjnI6T-1603529057983)(https://s1.ax1x.com/2020/08/21/dY9q6H.png)]

HTML5动画效果

window.requestAnimationFrame(）方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前碉用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

语法：

window.requestAnimationFrame(callback);

参数：

callback
一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame()开始触发回调函数的当前时间(performance.now(）返回的时间)。

返回值：

一个long 整数，请求ID，是回调列表中唯一的标识。是个非零值，没别的意义。可以传这个值给window.cancelAnimationFrame()以取消回调函数。

案例说明：

<script>
        console.log('this is message...');

        //浏览器兼容
        var requestAnimationFrame = webkitRequestAnimationFrame || mozRequestAnimationFrame ||

        /*
            requestAnimationFrame(callback)方法(似延迟执行)
            * 作用 - HTML5新增的动画方法
            * 参数
                * callback - 表示执行动画逻辑的回调函数
            * 返回值 - 表示当前执行动画的标识
            * 注意 - 具有浏览器兼容问题

            cancelAnimationFrame(animationID)方法
            * 作用 - 取消由requestAnimationFrame()方法设定的动画机制
        */
        requestAnimationFrame(function(){
            console.log('this is animation...');
        });// 有延迟

        console.log('this is message too...');
    </script>
</body>

图示：

案例_1 动态显示时间案例

<button id="start">开始显示</button>
    <button id="stop">停止显示</button>
    <h2 id="showtime"></h2>

    <script>
        var t;// 表示定时器的标准

        var start = document.getElementById('start');
        start.addEventListener('click',showTime)

        var stop = document.getElementById('stop');
        stop.addEventListener('click',function(){
            clearTimeout(t);
            start.removeAttribute('disabled');
        })

        //定义一个函数 - 完成获取时间并显示的功能
        function showTime(){
            //将当前按钮禁用
            start.setAttribute('disabled','disabled');
            //1.获取当前时间
            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            //2.格式化当前时间
            var time = hour + ':' +minute+ ":" +second;
            //3.实现动态显示
            var showtime = document.getElementById('showtime');
            showtime.textContent = time;
            //4.设置一个定时器
            t = setTimeout(showTime,1000);
        }
</script>

案例_2 方块自动移动案例

<style>
        body{
            margin:0;
        }
        #box{
            width: 50px;
            height: 50px;
            background-color: coral;

            position: absolute;
            top: 300px;
            left: 100px;
        }
 </style>

<div id="box"></div>

    <script>
        var box = document.getElementById('box');
        box.addEventListener('click',isMove);
        //定义一个标识 - 标识是停止还是移动
        var flag = flase; //表示停止
        var t; //定时器的标识

        //判断当前方快的状态
        function isMove(){
            if(!flag){ //如果停止，就移动
                //将标识设置为true - 标识移动
                flag = true;
                move();
            }else{//如果移动就停止
                flag =false;
                clearTimeout(t);
                stop();
            }
        }
        //实现方快移动逻辑
        function move(){
            //1.获取当前方快的left样式属性值
            var style = window.getComputedStyle(box);
            var left = parseInt(style.left);
            //2.增加left样式属性值
            left ++;
            //3.利用内联样式覆盖外联样式
            box.style.left = left + 'px';
            //4.设置定时器
            t =setTimeout(move,5);
        }
        function stop(){
            clearTimeout(t);
        }
</script>

案例_3 小球垂直移动

<style>
        body{
            margin:0;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: coral;
            border-radius: 25px;

            position: absolute;
            left: 400px;
            top: -50px;
        }
</style>

<!--<div id="box"></div>-->
    <script>
        //var box = document.getElementById('box');

        var body = document.body;
        const WINTH = window.innerWidth;
        //向页面中创建小球
        function createBox(){
            var div = document.createElement('div');
            div.setAttribute('class','box');
            var random = Math.random() * (WINTH - 50);
            div.style.left = random +'px';
            body.appendChild(div);
        }
        //控制小球向下移动
        function moveDown(){
            var boxs = document.getElementsByClassName('box');
            for(var i=0;i<boxs.length;i++){
                var box = boxs[i];
                var style = window.getComputedStyle(box);
                var boxTop = parseInt(style.top);
                boxTop += 10;
                box.style.top = boxTop +'px';
            }
        }
        
        //创建多个小球
        for(var i=0;i<10;i++){
            createBox(); // 创建一个小球
        }

        setInterval(function(){
            moveDown();
        },500);
    </script>

案例_4 高度值变化效果

<style>
        body{
            margin:0;
        }
        #menu{
            width: 100px;
            height: 300px;
            border: 1px solid black;

            position: absolute;
            left: 400px;
            top: 100px;
        }
</style>

<div id="menu"></div>
    <script>
        //1.获取指定元素
        var menu = document.getElementById('menu');
        //函数 - 实现指定元素的当前有效样式
        function slideUp(){
            //2.获取指定元素的当前有效样式
            var style = window.getComputedStyle(menu);
            //3.获取指定元素的高度值
            var height = parseInt(style.height);
            //判断当前的高度值是否为0
            if(height <= 0){
                // 将指定元素进行隐藏
                menu.style.display = 'none';
                clearTimeout(t);
            }else{
                //4.减小指定元素的高度值
                height--;
                //5.将减小的高度值重新为指定元素进行设置
                menu.style.height = height +'px';
                //6.设置定时器
                var t = setTimeout(slideUp,5);
            }
        }
        slideUp();
</script>

案例_5 键盘控制方块方向

<style>
        body{
            margin:0;
        }
        #box{
            width: 50px;
            height: 50px;
            background-color: aqua;

            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>

<div id="box"></div>
    <script>
        var body = document.body;
        var box = document.getElementById('box');
        var boxStyle = window.getComputedStyle(box);

        var boxTop = parseInt(boxStyle.top);
        var boxLeft = parseInt(boxStyle.left);

        var tUp,tDown,tLeft,tRight;

        body.addEventListener('keydown',function(event){
            var key = event.code;
            //每次键盘事件触发时，都重新的获取当前的top和left值
            var boxTop = parseInt(boxStyle.top);
            var boxLeft = parseInt(boxStyle.left);

            switch(key){
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
                case 'Space':
                if(tDown !== undefined){
                clearTimeout(tDown);
                }
                if(tLeft !== undefined){
                clearTimeout(tLeft);
                }
                if(tRight !== undefined){
                clearTimeout(tRight);
                }
                if(tUp !== undefined){
                clearTimeout(tUp);
                }
                    break;
            }
        });

        function moveUp(){
            box.style.top = (--boxTop) + 'px';
            tUp = setTimeout(moveUp,5);

            if(tDown !== undefined){
                clearTimeout(tDown);
            }
            if(tLeft !== undefined){
                clearTimeout(tLeft);
            }
            if(tRight !== undefined){
                clearTimeout(tRight);
            }
        }

        function moveDown(){
            box.style.top = (++boxTop) + 'px';
            tDown = setTimeout(moveDown,5);

            if(tUp !== undefined){
                clearTimeout(tUp);
            }
            if(tLeft !== undefined){
                clearTimeout(tLeft);
            }
            if(tRight !== undefined){
                clearTimeout(tRight);
            }
        }

        function moveLeft(){
            box.style.left = (--boxLeft) + 'px';
            tLeft = setTimeout(moveLeft,5);

            if(tUp !== undefined){
                clearTimeout(tUp);
            }
            if(tRight !== undefined){
                clearTimeout(tRight);
            }
            if(tDown !== undefined){
                clearTimeout(tDown);
            }
        }

        function moveRight(){
            box.style.left = (++boxLeft) + 'px';
            tRight = setTimeout(moveRight,5);

            if(tUp !== undefined){
                clearTimeout(tUp);
            }
            if(tLeft !== undefined){
                clearTimeout(tLeft);
            }
            if(tDown !== undefined){
                clearTimeout(tDown);
            }
        }
    </script>