codepen & js demos

Mutation Observer & customize resize event listener & demo

https://codepen.io/webgeeker/pen/YjrZgg

https://codepen.io/dashboard?type=search&opts_itemType=pen&opts_searchTerm=js&opts_order=newest&opts_depth=everything&opts_showForks=false&displayType=list&previewType=iframe&page=0

Mutation Observer

https://javascript.ruanyifeng.com/dom/mutationobserver.html

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

// todo

resize & response width

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event



const heightOutput = document.querySelector('#height');

const widthOutput = document.querySelector('#width');

function reportWindowSize() {

  heightOutput.textContent = window.innerHeight;

  widthOutput.textContent = window.innerWidth;

}

window.onresize = reportWindowSize;

// OR

window.addEventListener('resize', reportWindowSize);

https://codepen.io/xgqfrms/pen/dyyWrWb?&editable=true

&copyxgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

codepen & js demos的更多相关文章

  1. 使用zip.js压缩文件和解压文件

    zip.js官方网站为:https://stuk.github.io/jszip/ 在此说明,下面的例子基本上来自官方示例,大家可以做参考,官方示例地址为:https://stuk.github.io ...

  2. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  3. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  4. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  5. JavaScript资源分享

    一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...

  6. github上最全的资源教程-前端涉及的所有知识体系【转】

    github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...

  7. 终极教程【zhong】

    just for a better future! 资源教程               aiim                   综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...

  8. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  9. 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...

随机推荐

  1. 开篇~试试word写博客

    word发布博客设置,mark一下 原帖地址:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html word代码高亮插件:h ...

  2. 20155230 2016-2017-2《Java程序设计》第一周学习总结

    第一周学习总结 考核方式 100分构成 翻转课堂考核12次(5*12 = 60):每次考试20-30道题目,考试成绩规格化成5分(比如总分20分就除以4) 注意:不轮什么原因,缺考没有补考机会,但有做 ...

  3. 20155232 2016-2017-3 《Java程序设计》第10周学习总结

    20155232 2016-2017-3 <Java程序设计>第10周学习总结 教材学习内容总结 计算机网络 路由器和交换机组成了核心的计算机网络,计算机只是这个网络上的节点以及控制等,通 ...

  4. day4 基础

    1.变量 2.打印名片 3.raw_input() 和 input() 4.变量类型 type 5. if-else 6.标示符的规则 7.关键字 8.运算符 9.print打印多个值 1.变量 sc ...

  5. KVM虚拟化的安装

    kvm介绍 一.KVM的历史 Kvm在2007年2月正式合并Linux2.6.20核心中,成为内核源代码的一部分.2008年9月4日,RedHat公司收购了Qumranet,开始在RHEL中用kvm取 ...

  6. Zabbix学习之路（六）TCP状态监控

    TCP状态监控 Tcp的连接状态对于我们web服务器来说是至关重要的,尤其是并发量ESTAB:或者是syn_recv值,假如这个值比较大的话我们可以认为是不是受到了***,或是是time_wait值比 ...

  7. JS的发布订阅模式

    JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志 ...

  8. cogs87 乘积最大

    cogs87 乘积最大 原题链接 题解 竟然不用高精... f[i][j]表示前i位数j个乘号的最大数f[i][j]=max{f[i-l][j-1]*num[i-l+1][i]} num[a][b]表 ...

  9. apache开启伪静态的方法 php篇

    打开apache的配置文件httpd.conf 找到 #LoadModule rewrite_module modules/mod_rewrite.so 把前面#去掉.没有则添加,但必选独占一行,使a ...

  10. 一个web应用的诞生(5)--数据表单

    下面把角色分为两种,普通用户和管理员用户,至少对于普通用户来说,直接修改DB是不可取的,要有用户注册的功能,下面就开始进行用户注册的开发. 用户表 首先要想好用户注册的时候需要提供什么信息:用户名.密 ...