day08

最新推荐文章于 2024-06-11 15:42:53 发布
最新推荐文章于 2024-06-11 15:42:53 发布
阅读量74 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chifuren/article/details/111833542
版权

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>
    <script>
        const oList = document.querySelector('ul')
        const oE = document.createElement('li')
        //oE.append('Swift')
        oE.textContent = 'swift'
       // oList.append(oE)  // 插入成为最后一个节点
       // oList.prepend(oE)  // 插入成为第一个节点
       // oList.lastElementChild.before(oE) // 最后一个子节点的前面一个
       //oList.firstElementChild.after(oE)  /// 插在第一个子节点之后
       // oList.firstElementChild.nextElementSibling.remove()
       oList.lastElementChild.replaceWith(oE)
    </script>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>click</button>

    <script>
        const oButton = document.querySelector('button')
        const callback = function () {
            console.log('Hello, Event')
        }

        oButton.addEventListener('click', callback)
        oButton.addEventListener('click', ()=> {
            console.log('hello, event1')
        })

    </script>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='btnTest1'>click me</button>
    <button id="btnTest2" onclick='console.log("test")'>click me 2</button>
    <script>
        const myButton = document.querySelector('#btnTest1')
       /*
       
        myButton.onclick = function () {
            console.log('onclick')
        }
        // 通过这种方式只能设置一个事件处理程序。
        myButton.onclick = function() {
            console.log('hello')
        }
        //myButton.onclick = null   // 去掉绑定
        */
        
        const callback = () => {
            console.log('callback1')
        }
        const callback2 = () => {
            console.log('callback2')
        }
        const callback3 = () => {
            console.log('callback3')
        }

        myButton.addEventListener('click', callback)
        myButton.addEventListener('click', callback2)
        myButton.addEventListener('click', callback3)


        //myButton.removeEventListener('click',callback, false)
    </script>
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color:gray;
        }
    </style>
</head>
<body>
    <div id="box">box</div>
    <script>
        const oBox = document.querySelector('#box')

        window.addEventListener('click',() => {
            console.log('==> window 捕获阶段')
        },true)
        document.addEventListener('click',() => {
            console.log('==> document 捕获阶段')
        }, true)
        document.documentElement.addEventListener('click',() => {
            console.log('==> html 捕获阶段')
        }, true)
        document.body.addEventListener('click',(event) => {
            console.log('==> body 捕获阶段')
            event.stopPropagation()
        }, true)
        oBox.addEventListener('click',() => {
            console.log('==> box 捕获阶段')
        }, true)

        window.addEventListener('click',() => {
            console.log('==> window 冒泡阶段')
        },false)
        document.addEventListener('click',() => {
            console.log('==> document 冒泡阶段')
        }, false)
        document.documentElement.addEventListener('click',() => {
            console.log('==> html 冒泡阶段')
        }, false)
        document.body.addEventListener('click',() => {
            console.log('==> body 冒泡阶段')
        }, false)
        oBox.addEventListener('click',() => {
            console.log('==> box 冒泡阶段')
        }, false)
    </script>
</body>
</html>

5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>my div</div>
    <script>
        const myDiv = document.querySelector('div')

        myDiv.addEventListener('click',(event) => {
            console.log(`${event.type}`)
        })

        const helloEvent = new Event('hello',{bubbles:true,cancelable:false})

        myDiv.addEventListener('hello',() => {
            myDiv.style.backgroundColor = "red"
            console.log(event.isTrusted)
        })

        myDiv.dispatchEvent(helloEvent)
    </script>
</body>
</html>

6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>click me</button>
    <script>
        const oButton = document.querySelector('button')

        oButton.addEventListener('click', (event) => {
            for (let prop in event) {
                console.log(prop)
            }
        })
    </script>
</body>
</html>

7.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background: gray;
            padding: 20px;
            margin: 20px;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="box1">
        <div id="box2">click me</div>
    </div>
    <script>
        const box = document.querySelector('#box2')
        box.addEventListener('click', (event) => {
            console.clear()
            console.log(`clientX=${event.clientX}, clientY=${event.clientY}`)
            console.log(`ScreenX=${event.screenX}, screenY=${event.screenY}`)
            console.log(`pageX=${event.pageX}, pageY=${event.pageY}`)
            console.log(`offsetX=${event.offsetX}, offsetY=${event.offsetY}`)
            console.log(`x=${event.x}, y=${event.y}`)
            console.log(`layerX=${event.layerX}, layerY=${event.layerY}`)
            console.log(`event.type=${event.type}`)
            console.log(`event.target=${event.target}`)
            console.log(`event.currentTarget=${event.currentTarget}`)
        }, true)

        const callback = function (event) {
            switch (event.type) {
                case "mouseover":
                    event.target.style.backgroundColor = 'red'
                    break;
                case "mouseout":
                    event.target.style.backgroundColor = "blue"
                    break;
            }
        }
        box.addEventListener("mouseover", callback)
        box.addEventListener('mouseout',callback)
    </script>
</body>

</html>

8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
    <script>
        const oDiv = document.querySelector('div')
        const oPara = document.querySelector('p')
        // const oPhase = {
        //     1: '捕获阶段',
        //     2: '目标阶段',
        //     3: '冒泡阶段'
        // }

        // const callback = (event) => {
        //     console.log(`元素：${event.currentTarget.tagName}，传播阶段：${oPhase[event.eventPhase]}`)
        // }
        const callback = (event) => {
            console.log(`元素：${event.currentTarget.tagName}，传播阶段：${event.eventPhase}`)
        }
        oDiv.addEventListener('click',callback,true)
       // oPara.addEventListener('click',callback,true)
        oDiv.addEventListener('click',callback,false)
        oPara.addEventListener('click', callback, false)
    </script>
</body>
</html>

9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a id='link' href="https://www.microsoft.com">Microsoft HomePage</a>
    <input type="text">
    <script>
        const oLink = document.querySelector('#link')

        oLink.addEventListener('click',(event) => {
            if (event.cancelable) {
                event.preventDefault()
            }
            console.log(event.defaultPrevented)
            console.log('hello, link')
        })


        const oText = document.querySelector('input')

        oText.addEventListener('keypress',(event) => {
            if (event.charCode < 97 || event.charCode > 122) {
                event.preventDefault()
            }
        })
    </script>
</body>
</html>
chi夫人
关注
VUE PC端项目px转为rem适应屏幕
张杰伦的博客
11-05 530
安装lib-flexible和postcss-pxtorem，这两个版本亲测可用 npm install --save autoprefixer@^9 npm install postcss-pxtorem@5.1.1 在main.js中引入 import 'lib-flexible/flexible' 修改node_modules中的lib-flexible/flexible文件中 原来的是适配移动端，修改为下面这样 function refreshRem(){ var w
PC端页面切换成手机模式后，出行了一个莫名其妙的980px
webFront的博客
07-03 2056
移动端的默认布局视口宽一般是980px，所以body的100%才是980px。 可以加这个<meta name="viewport" content="width=1200, initial-scale=1.0">
pc网页响应式在手机网页宽度980px问题方案
weixin_45527741的博客
05-09 819
pc网页响应式在手机网页宽度980px问题方案 html中加上如下代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 来源网页
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？
白鹿第一帅的 CSDN 博客
05-12 4202
作为开发工程师与产品经理，我们需要站在产品本身与用户的角度对系统进行设计与思考，而非仅仅是为了满足某一项“迫切”的功能。如何才能使产品、程序员和用户都对 H5 页面满意？本文我们将从登陆页面开始，体会移动端开发的典型特征。
手机端的屏幕自适应(一)
weixin_30674525的博客
11-28 213
通过rem布局 只要引入这个代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...
pc端页面移动端不适应解决方案
m0_57941469的博客
02-25 931
前两天做了一个网站，UI需求是既要大气的展现还要完整的内容，那就只能是做pc端页面了，最后发现手机端页面不兼容，网站头部和底部页面都是兼容的，中间的部分却特别宽，最后我的解决办法是利用<table>标签，也算是一个不错的方案吧，因为<table>标签是可以滑动的，而且应用也特别简单 <div style="width:100%;height:100%;overflow:auto;"> <table> <!--正文内容，取码网-
Day08
03-16
在JavaScript的世界里，"Day08"可能是一个学习日程或者课程模块的标识，它涵盖了这一阶段关于JavaScript的重要概念和技巧。在这个阶段的学习中，我们很可能会深入理解JavaScript的基础语法、变量、数据类型、控制流...
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 2006
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端
最新发布
2401_85124837的博客
06-11 257
【代码】前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端。
Chrome调试模拟iPhone6时body显示980*1742
MeiBlog
07-25 168
原因 由于我们大部分移动设备默认的viewport都是980px 解决 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
如何解决PC端和移动端自适应问题？
github_36111469的博客
12-13 8533
如何解决PC端和移动端自适应问题？    做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用94
viewport,html,body在pc和移动的差异
weixin_33898233的博客
12-26 467
2019独角兽企业重金招聘Python工程师标准>>> ...
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？
weixin_44761231的博客
05-01 4091
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？ 1、首先我们要知道把一个PC端的网站放到手机端需要经过两步： 第一步：把电脑端的网站放到虚拟容器中。（一个概念——视口：这个虚拟容器就叫做视口。） 这个虚拟容器的宽度是980px。这个980px是人为规定的，在手机出厂时就设置好的。 为什么是980px？因为早期的PC端显示器宽度是980px。 如果PC端网站宽度小于980px，完全可以放进这个虚拟容器里面。 如果PC端网站宽度等于980px，刚好可以放进这个虚拟容器里面。 如果PC
pc网页调整为手机模式
m0_60402142的博客
06-22 1万+
pc网页调整为手机模式
移动前端开发之viewport的深入理解
热门推荐
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
外贸网站建设中div宽度设为100%，手机或ipad显示只有980px的解决方法
01-16 4778
在外贸网站建设的时候，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100%, 到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。 可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以
html5开发之viewport使用
weixin_34378767的博客
08-30 1168
2019独角兽企业重金招聘Python工程师标准>>> ...
day08课件资料压缩包下载
资源摘要信息:"day08课件.zip" 根据提供的文件信息，我们可以推断出以下知识点： 1. 文件格式与压缩技术 - "zip"是文件压缩的一种常用格式，它通过压缩算法减小文件体积，便于存储和传输。 - zip格式支持跨平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值