JavaScript 学习 Day5_p235-p286

最新推荐文章于 2024-05-09 19:32:32 发布

TeacherChaos

最新推荐文章于 2024-05-09 19:32:32 发布

阅读量117

点赞数

分类专栏： JavaScript学习文章标签： javascript 学习前端

超老师学习使用，如需转载请标明出处！

本文链接：https://blog.csdn.net/qq_42317222/article/details/125241716

版权

JavaScript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>

    <script>
        var btns = document.querySelectorAll('button');/* 伪数组的方式获取了两个按钮，伪数组有数组结构但是没有数组方法 */
        //1.传统方式注册事件
        btns[0].onclick = function(){
            alert('hi');
        }

        btns[0].onclick = function(){
            alert('hao a u');
        }

        //2.事件监听方式注册事件 
/*      （1）事件类型是字符串必须加引号 而且不带on
        （2）同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        注意：IE9以上才支持 */
        btns[1].addEventListener('click',function(){
            alert('hello');
        });

        btns[1].addEventListener('click',function(){
            alert('world');
        });
    </script>
</body>
</html>

attachEvent不建议使用，IE9之前可以使用，只做了解

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        var divs = document.querySelectorAll('div');

        divs[0].onclick = function(){
            alert('11');

            //1.传统方法删除事件
            divs[0].onclick = null;
        }
            //2.用emoveEventListener方法删除事件
        divs[1].addEventListener('click',fn);//里面的fn不需要调用加小括号
        function fn() {
            alert('22');
            divs[1].removeEventListener('click',fn);
        }

            //3.特殊情况删除事件,ie9之前使用
            divs[2].attachEvent('onclick',fn1);
            function fn1(){
                alert('33');
                divs[2].detachEvent('onclick',fn1);
            }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
            margin: 100px auto;
        }
        
        .son{
            width: 150px;
            height: 150px;
            background-color: blueviolet;
            position: absolute;
            top: 25px;
            left: 25px;
            text-align: center;
            line-height: 150px;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>

    <script>
        //dom 事件流 三个阶段
        //1、js代码中只能执行捕获或者冒泡其中的一个阶段
        //2、onclick和attEvant(ie) 只能得到冒泡阶段
        //3、捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html ->
        //body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function(){
            alert('son');
        }, true);

        var father = document.querySelector('.father');
        father.addEventListener('click', function(){
            alert('father');
        }, true);

        //4、冒泡阶段 如果addEventListener 第三个参数是 false 那么则处于冒泡阶段 son -> father ->body
        //-> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function(){
            alert('son');
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function(){
            alert('father');
        }, false);

        document.addEventListener('click', function(){
            alert('document');
        });
    </script> 
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(event){
            console.log(event);
        }

        div.addEventListener('click', function(e){
            console.log(e);
            console.log(window.event);
            e = e || window.event;
            console.log(e);
        });
        //1.event就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        //3.事件对象 是我们一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息
        //鼠标坐标等，如果是键盘事件，里面就包含了键盘事件的信息，比如 判断用户按下了哪个键
        //4.这个事件对象我们可以自己命名 比如event,evt,e
        //5.事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 e = e || window.event;
    </script>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>
</html>

事件对象阻止默认行为


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
            // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

在这里插入图片描述

注意：事件委托原理必须背下来！！！

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p{
            font-size: 20px;
            line-height: 30px;
            background-color: aqua;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>知否知否,点我应有弹窗在手！</li>
        <li>知否知否,点我应有弹窗在手！</li>
        <li>知否知否,点我应有弹窗在手！</li>
        <li>知否知否,点我应有弹窗在手！</li>
        <li>知否知否,点我应有弹窗在手！</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');

        ul.addEventListener('click', function(e){
            // alert('123');
            // e.target这个可以获取当前点击对象
            // e.target.style.backgroundColor = 'pink';
            e.target.className = 'p';
        });
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是一段不愿意分享的文字
    <div>
        123
    </div>
    <script>
        //1.contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e){
            e.preventDefault();
        });

        //2.禁用鼠标选中 selectstart，防止Ctrl+c 跟 Ctrl+v
        document.addEventListener('selectstart', function(e){
            e.preventDefault();
        });
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //鼠标事件对象 MouseEvent
        document.addEventListener('click',function(e){
            //1.鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);//X跟Y都必须大写

            //2.鼠标在文档页面的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);//X跟Y都必须大写

            //3.鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);//X跟Y都必须大写
        });
    </script>
</body>
</html>

跟随鼠标的小天使源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img{
            width: 100px;
            height: 80px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <img src="/JavaScript study/images/3.jpg" alt="">

    <script>
        var img = document.querySelector('img');

        document.addEventListener('mousemove',function(e){
            //console.log(e);
            img.style.top = e.pageY - 40 + 'px';
            img.style.left = e.pageX -50 + 'px';
        });
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    //常用的键盘事件
    //1.keyup 按键弹起的时候触发
        document.onkeyup = function(){
            console.log('我弹起了');
        }

    //2.keydown 按键按下的时候触发
        document.onkeydown = function(){
            console.log('我按下了');
        }

    //3.keypress 按键按下的时候触发，但是不识别功能键
    document.onkeypress = function(){
        console.log('我按下了，但不识别功能键');
        }
        
    //4.三个时间的执行顺序 keydown --> keypress --> keyup    
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        //1.我们的keyup和keydown事件3不区分字母大小写 a和A得到的都是65
        //2.我们的keypress事件 区分字母大小写
        document.addEventListener('keyup', function(e){
            // console.log(e);
            console.log(e.key);
            console.log('up' + e.keyCode);
        });

        document.addEventListener('keypress', function(e){
            // console.log(e);
            console.log(e.key);
            console.log('press' + e.keyCode);
        });
    </script>
</body>
</html>

京东搜索框按S光标获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">
        <input type="search">
        <button>搜索</button>
    </div>

    <script>
        var ipt = document.querySelector('input');

        document.addEventListener('keyup', function(e){
            if(e.key === 's'){
                ipt.focus();// 获得焦点
            }else{
                alert('按s获取焦点');
            }
        });
    </script>
</body>
</html>

京东快递单号查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son1{
            border: 1px solid red;
            width: 168px;
            height: 25px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <input type="text">
        <button>查询</button>
    </div>

    <script>
        var son1 = document.querySelector('.son1');
        var ipt = son1.nextElementSibling;

        ipt.addEventListener('keyup',function(e){

            if(this.value !== ''){
            son1.style.display = 'block';
            son1.innerHTML = this.value;
            //son1.innerHTML = e.key;这种写法错误的因为e.key始终只有一个值
            }else{
                son1.style.display = 'none';
            }
        });

        //当我们失去焦点就隐藏上方盒子
        ipt.addEventListener('blur', function(e){
            son1.style.display = 'none';
        });
        //当我们获得焦点就显示这个盒子
        ipt.addEventListener('focus', function(e){
            if(this.value !== ''){
                son1.style.display = 'block';
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');

            btn.addEventListener('click', function(){
                alert('点击我');
            });
        });
    </script>
    <button>点击</button>
</body>
</html>

图片很多的情况下适用于这种

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
            var div = document.querySelector('div');
        window.addEventListener('resize', function(){
            //console.log('变化了');
            console.log(window.innerWidth);
            if(window.innerWidth < 900){
                div.style.display = 'none';
            }else{
                div.style.display = 'block';
            }
        });
    });
    </script>
    <div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.setTimeout
        //语法规范：window.setTimeout(调用函数， 延时时间);
        //1.这个window在调用的时候可以省略
        //2.这个延时时间单位是毫秒 但是可以省略 如果省略默认的是0
        //3.这个调用函数可以直接写函数 还可以写函数名
        //4.页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

        window.setTimeout(function(){
            console.log('时间到了');
        },2000);


        function boom(){
            console.log('boom!');
        }
        // 给不同的定时器起名字，防止冲突
        var time1 = setTimeout(boom, 2000);
        var time2 = setTimeout(boom, 5000);

        //最后一种不提倡的写法,太啰嗦
        setTimeout('boom()', 2000);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>炸弹</div>
    <button>点击停止定时器</button>
    <script>
        var div = document.querySelector('div');
        var btn = div.nextElementSibling;

        var boom = setTimeout(function(){
            div.innerHTML = '爆炸了！';
        } ,5000);

        btn.addEventListener('click', function(){
            window.clearTimeout(boom);
            div.innerHTML = '炸弹解除！';
            div.style.backgroundColor = 'green';
        });
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>停止</button>
    <script>
        //1.setInterval
        //语法规范：window.setInterval(调用函数， 延时时间);
        var a = window.setInterval(function(){
            console.log('a');
        }, 1000);

        var btn = document.querySelector('button');

        btn.addEventListener('click',function(){
            window.clearInterval(a);
        });
    </script>
</body>
</html>

模拟京东倒计时器的效果


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>

    <script>
        var begin = document.querySelector('.begin');
        var stop1 = begin.nextElementSibling;
        var i = 0;
        var b = null;// 一点要赋值不然是未定义的,null是一个空对象

        begin.addEventListener('click', function () {
            b = setInterval(function () {
                console.log(i++);
            }, 1000);
        });

        stop1.addEventListener('click', function () {
            clearInterval(b);
        });
    </script>
</body>

</html>

短信定时器效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 30px;
            border: 1px solid red;
            margin: 0 auto;

        }
    </style>
</head>
<body>
    <div class="father">
        <input type="text">
        <button>发送</button>
    </div>

    <script>
        var btn = document.querySelector('button');
        var time = 6;
        var s = null;
        // btn.onclick = function(){
        //     btn.innerHTML = '在秒内不能再点击';
        // }

        btn.addEventListener('click', function(){
            btn.disabled = true;
            var s = setInterval(function(){
            if(time == 0){
                clearInterval(s);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 6;
            }else{
                btn.innerHTML = '在' + time-- + '秒内不能再点击';
            }
        }, 1000);
        });
    </script>
</body>
</html>

在这里插入图片描述

获取URL参数案例

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div>
        <p>登录页面</p>
        <div>
            <form action="index.html">
            用户名: <input type="text" name="uname"> <input type="submit" value="提交">
            </form>
        </div>
    </div>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>首页</div>
    <span class="name"></span><span>欢迎光临</span>

    <script>
        console.log(location.search); //?uname=andy
        //1.先去掉？  substr('起始的位置', 截取几个字符);
        var params = location.search.substr(1);//uname=andy

        //2.利用=把字符串分割成数组 split('=');
        var arr = params.split('=');

        var uname = document.querySelector('.name');
        uname.innerHTML = arr[arr.length-1];
    </script>
</body>
</html>