zoukankan      html  css  js  c++  java

  • 前端 JS事件操作

    js操作页面三步骤

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作页面的三步骤</title>
</head>
<body>
    <h1>操作页面的三步骤</h1>
    <div class="box">
        <h1>box h1</h1>
    </div>
</body>
<script>
    // 1、获取页面标签
    // 2、设置操作的激活条件 - 事件
    // 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构

    // 1
    let body = document.querySelector('body');
    let box = document.querySelector('.box');
    // 父级调用选择器方法，只完成自己内部的检索
    let body_h1 = body.querySelector('h1');
    console.log(body_h1);
    let box_h1 = box.querySelector('h1');
    console.log(box_h1);

    // 2
    body_h1.onclick = function () {
        // console.log('你丫点我了')
        // 3
        if (box_h1.style.color != 'red') {
            box_h1.style.color = 'red';
            box_h1.style.backgroundColor = 'orange';
        } else {
            box_h1.style.color = 'black';
            box_h1.style.backgroundColor = 'white';
        }
    }
</script>
</html>

    js事件

    鼠标事件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
             200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    // 单击
    box.onclick = function () {
        console.log('单击了', this)
    };
    // 双击
    box.ondblclick = function () {
        console.log('双击了')
    };
    // 右键
    box.oncontextmenu = function () {
        console.log('右键了');
        // 有些事件有系统默认动作，取消默认动作可以返回 false
        return false;
    };
    // 悬浮
    box.onmouseover = function () {
        console.log('悬浮了');
    };
    // 移开
    box.onmouseout = function () {
        console.log('移开了');
    };
    // 移动
    box.onmousemove = function () {
        console.log('移动了');
    };
    // 按下
    box.onmousedown = function () {
        console.log('按下了');
    };
    // 抬起
    box.onmouseup = function () {
        console.log('抬起了');
    };
</script>
</html>

    文档事件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档事件</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
    <script>
        // 页面加载成功
        window.onload = function () {
            console.log(h1)
        }
    </script>
</head>
<body>
    <h1 id="h1">hhhhh</h1>
</body>
<script>
    let body = document.querySelector('body');
    // 页面滚动事件
    document.onscroll = function (ev) {
        console.log('滚动了');
        // console.log(ev);
        // console.log(window.scrollY);
        if (window.scrollY >= 500) {
            body.style.backgroundColor = 'red';
        } else {
            body.style.backgroundColor = 'white';
        }
    }
</script>
</html>

    键盘事件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘事件</title>
</head>
<body>
    <h1>键盘事件</h1>
    <input type="text">
</body>
<script>
    let inp = document.querySelector('input');

    inp.onkeydown = function () {
        console.log('按下')
    };
    inp.onkeyup = function () {
        console.log('抬起')
    }

</script>
</html>

    表单事件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单事件</title>
    <style>
        /*表单的内外边框*/
        input {
            border: 2px solid pink;
        }
        input:focus {
            outline: 2px solid yellow;
        }
    </style>
</head>
<body>
<form action="">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="登录">
</form>
</body>
<script>
    let form = document.querySelector('form');
    let submit = document.querySelector('[type="submit"]');
    let usr = document.querySelector('[type="text"]');

    // 表单提交事件：表单默认也有提交数据的动作，也可以取消
    form.onsubmit = function () {
        console.log('提交了');
        return false;
    };

    // 获取焦点
    usr.onfocus = function () {
        console.log('获取焦点')
    };

    // 失去焦点
    usr.onblur = function () {
        console.log('失去焦点')
    };

</script>
</html>

    事件对象

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
    inp = document.querySelector('.inp');
    inp.onkeydown= function (ev) {
        console.log(ev);
        // console.log(ev.keyCode);

        if (ev.keyCode === 13) {
            console.log('回车了')
        }
        if (ev.ctrlKey && ev.keyCode === 13) {
            console.log('消息发送了')
        }
    };

    document.onclick = function (ev) {
        console.log(ev);
        // 鼠标点击点
        console.log(ev.clientX, ev.clientY);
    }
    
</script>
</html>

    js操作内容

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内容操作</title>
</head>
<body>
    <h1 class="title">标题</h1>
    <input type="text" class="title">
    <button class="btn">改标题</button>
</body>
<script>
    let h1 = document.querySelector('h1.title');
    let inp = document.querySelector('input.title');
    let btn = document.querySelector('.btn');

    // 内容操作：value | innerText | innerHTML
    btn.onclick = function () {
        // 拿到输入框的内容
        inp_value = inp.value;
        if (inp_value) {
            // inp_value = '';  // 改的只是一个内存变量
            inp.value = '';  // 清空输入框

            // 将内容赋值给h1 innerText | innerHTML
            // console.log(h1.innerText);
            // console.log(h1.innerHTML);
            // 纯文本
            // h1.innerText = inp_value;
            // 文本中的标签会被解析
            h1.innerHTML = inp_value;
        }
    }
</script>
</html>

    js操作样式

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式操作</title>
    <style>
        .box {
             200px;
            height: 200px;
            background-color: pink;
        }
        .sup-box {
            /* 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <!--<div class="box" style="background-color: deeppink;"></div>-->
    <div class="box">文本</div>
</body>
<script>
    let box = document.querySelector('.box');
    // 需求1：单击获取标签的之前背景颜色
    /*
    box.onclick = function () {
        // 注：this.style 本质操作的是行间式（只能获取和设置行间式）
        // bgColor = this.style.backgroundColor;
        // console.log(bgColor);

        // 注：在内联和外联中书写的样式称之为 计算后样式

        // 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读
        // getComputedStyle(标签, 伪类).样式;
        bgColor = getComputedStyle(this, null).backgroundColor;
        console.log(bgColor);
        width = getComputedStyle(this, null).width;
        console.log(width, parseInt(width));

        // 只读，会报错
        // getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
    }
    */

    // 需求2：点击修改标签的宽高背景颜色
    /*
    box.onclick = function () {
        this.style.backgroundColor = 'orange';
        this_style = getComputedStyle(this, null);
        // console.log(parseInt(this_style.width) * 2);
        // 宽放大两倍，高缩小两倍
        this.style.width = parseInt(this_style.width) * 2 + 'px';
        this.style.height = parseInt(this_style.height) / 2 + 'px';
    }
    */
    
    // 需求：操作计算后样 - 提取写好计算后样式，通过类名将 js 与 css 建立关联
    box.onclick = function () {
        console.log(this.className);
        // this.className = 'sup-box';

        /*
        if (this.className === 'box') {
            this.className = 'sup-box';
        } else {
            this.className = 'box';
        }
        */
        // 注：有个空格：空格sup-box
        // this.className += ' sup-box';

        if (this.className === 'box') {
            this.className += ' sup-box';
        } else {
            this.className = 'box';
        }
    };
</script>
</html>

    页面转跳

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面转跳</title>
</head>
<body>
    <button class="b1">自我刷新</button>
    <button class="b2">转跳到9</button>
    <button class="b3">ctrl新开转跳到9</button>
</body>
<script>
    window.owen = 'Owen';
    let b1 = window.document.querySelector('.b1');
    // 自我刷新
    b1.onclick = function () {
        // console.log(owen);

        // '' 代表当前页面链接
        // window.location.href = '';
        location.reload();
    };

    let b2 = window.document.querySelector('.b2');
    // 转跳到9*.html
    b2.onclick = function () {
        // 在自身所在标签替换
        window.location.href = '9、样式操作.html';
    };

    // ctrl新开转跳到9
    let b3 = window.document.querySelector('.b3');
    b3.onclick = function (ev) {
        // open('转跳路径', '默认就是_blank')
        if (ev.ctrlKey) {
            window.open('9、样式操作.html');
        } else {
            window.open('9、样式操作.html', '_self');
        }
    }
</script>
</html>

    屏幕有滚动条下的两种宽度

    去除滚动条剩余的全部宽度

    let html = document.querySelector('html');
console.log(html.clientWidth);

    不去除滚动条剩余的全部宽度

    function getHtmlWidth() {
    let hidden = document.createElement('div');
    hidden.style.width = '100vw';
    html.appendChild(hidden);
    width = parseInt(getComputedStyle(hidden, null).width);
    html.removeChild(hidden);
    return width
}
width = getHtmlWidth();
console.log(width);

    案例：动态尺寸

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态尺寸</title>
    <style>
        body {
            margin: 0;
            height: 3000px;
        }
        .box {
            /* 200px;*/
            /*height: 200px;*/
            /* 100%;*/

            background-color: orange;
            position: fixed;
            top: 0;
            left: 0;

            min- 900px;
            max- 1100px;

             90%;
            margin-left: 5%;

            /*vw viewwidth  vh viewheight*/
            /* 90vw;*/
            /*margin-left: 5vw;*/
        }
    </style>
</head>
<body>
    <div class="hidden" style=" 100vw"></div>
    <div class="box"></div>
</body>
<script>
    let html = document.querySelector('html');

    // 去除滚动条的宽度
    console.log(html.clientWidth);

    // 包含滚动条的宽度
    // let hidden = document.querySelector('.hidden');
    // width = parseInt(getComputedStyle(hidden, null).width);
    // console.log(width);

    function getHtmlWidth() {
        let hidden = document.createElement('div');
        hidden.style.width = '100vw';
        html.appendChild(hidden);
        width = parseInt(getComputedStyle(hidden, null).width);
        html.removeChild(hidden);
        return width
    }
    width = getHtmlWidth();
    console.log(width);



    function resizeBox() {
        box_width = parseInt(getComputedStyle(box, null).width);
        box.style.height = box_width / 6 + 'px';
        if (box_width >= 1100) {
            box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
        }
    }

    let box = document.querySelector('.box');
    resizeBox();

    window.onresize = function () {
        resizeBox();
    };
</script>
</html>
  • 相关阅读:
    Angular Universal 学习笔记
    SAP Spartacus 如何获得当前渲染页面的 CMS 元数据
    Angular 服务器端渲染的学习笔记(二)
    Angular 服务器端渲染的学习笔记(一)
    第三方外部 Saas提供商如何跟使用 SAP 系统的客户进行对接接口集成
    如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置
    具备自动刷新功能的 SAP ABAP ALV 报表
    C++学习目录
    c--条件编译
    c--文件读写--二进制
  • 原文地址：https://www.cnblogs.com/bladecheng/p/11304820.html
Copyright © 2011-2022 走看看