原生js
关注
分享
扫一扫
男孩子小杨
一名前端小白，对web网站运营和开发有浓烈兴趣。
展开
-
原生js——实现Tab选项卡切换效果——加入手动切换（汇总）
原生js、实现简单的Tab(tab)选项卡切换效果——加入手动切换（汇总）注：这是对tab选项卡切换效果的一个总结；1.Demo展示：如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286).如要实现延迟切换效果，请查看：link(https://blog.csdn.net/...原创 2019-02-17 17:27:23 · 946 阅读 · 0 评论 -
原生js、计时器实现倒计时
原生js、计时器实现倒计时1.Demo展示( 时间差：now—2月28号00:00 )：2 . Html布局： <div class="wrap"> <div class="times"> <span class=&原创 2019-02-16 17:04:22 · 1917 阅读 · 1 评论 -
原生js、实现缓慢回到顶部效果
原生js、计时器实现回到顶部效果1.Demo展示：2 . Html布局： <!--返回顶部--> <div class="gotop"> <img src="images/top/t原创 2020-03-04 15:07:03 · 2225 阅读 · 2 评论 -
原生js——实现网页登录框、遮罩层（弹出层）效果、原页面进行登录
原生js——实现网页登录框、遮罩层效果1.Demo展示（单击遮罩层、或单击关闭按钮即可实现对元素的移除）：2 . Html布局（无任何代码）： <body></body> <!--应用了js把div节点动态地插入到页面中；-->以下为：将要在js里嵌入的Html源码(通过innerH原创 2019-02-15 16:16:47 · 3422 阅读 · 0 评论 -
原生js（DOM2级事件）实现常见的网页抽屉下拉，收起效果
原生js实现常见的抽屉下拉，收起效果1.Demo展示：2 . Html布局： <div class="drawer"> <div class="drawer-content">原创 2019-02-14 17:45:32 · 1651 阅读 · 0 评论 -
网页设计中的事件处理程序（HTML事件处理、DOM0级事件处理、DOM2级事件处理、IE事件处理）
**网页设计中不同类型的事件处理程序**1.HTML 事件处理程序：先看例子(添加事件处理程序)：<script type="text/javascript"> function show(){ alert("Hello world!"); }</script&原创 2020-03-04 15:08:11 · 907 阅读 · 0 评论 -
html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换
html，css，js实现简单的Tab(tab)选项卡切换效果——延迟切换1.Demo展示：计时器未生效：计时器事件生效：如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286).如要实现延迟切换效果，请查看：link(https://blog.csdn.net/qq_...原创 2019-02-14 14:22:18 · 33850 阅读 · 7 评论 -
html，css，原生js——实现Tab(tab)选项卡切换效果——立刻切换
html，css，js实现简单的Tab(tab)选项卡切换效果1.Demo展示：onmuseover未触发：onmouseover触发时：2 . Html布局： <div class="wrap"&am原创 2019-02-13 15:37:59 · 10439 阅读 · 2 评论 -
js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级)
简单的css，js，jquey实现下拉菜单（二级、三级）1.Demo效果图：静态展示：css-hover（ js、jq触发mouse事件时 ）2.涉及到的知识点：3.代码展示：Html布局：<div class="nav&amp原创 2019-02-09 23:52:11 · 4837 阅读 · 0 评论 -
原生js——动态引入外部js、css文件
原生js——动态引入外部js、css文件把其写成自定义函数（url为文件路径）供以后的元素调用： //加载外部css文件 function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'...原创 2019-04-27 15:55:35 · 5484 阅读 · 0 评论 -
原生js——无法获取元素高度的的问题
原生js——无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题，原来一直没有注意到这个小细节：1）如果width：150px；是写在 css 样式表（外链式）里面的，获取宽度或者高度的方法是：xxx.offsetWidth、xxx.offsetHeight2）如果width：150px；是内联样式（style=“width:150px;”），获取宽度...原创 2019-06-12 10:41:46 · 1778 阅读 · 1 评论 -
原生js--电脑打字效果
超级简单的原生js、计时器实现电脑打字效果1.Demo展示：2 . Html布局（超级简单）： <div class="copyright-typer"><p></p></div>3.原创 2019-02-18 12:54:06 · 372 阅读 · 0 评论 -
原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()、
原生js添加、移除类名（HTML5新增classList）classList.add()；添加新的类名，如已经存在，取消添加classList.contains();确定元素中是否包含指定的类名，返回值为true 、false；classList.remove()；移除已经存在的类名;classList.toggle()；如果classList中存在给定的值，删除它，否则，添加它...原创 2019-02-21 19:28:53 · 48563 阅读 · 0 评论 -
html，css，原生js——实现常见的Tab(tab)选项卡切换效果——延迟切换
html，css，js实现简单的Tab(tab)选项卡切换效果——延迟切换1.Demo展示：onmuseover触发前：onmouseover触发时：如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286).如要实现自动切换效果，请查看：link.2 . Html布局...原创 2019-02-14 14:10:29 · 2421 阅读 · 0 评论 -
原生js——与text有关的属性、方法：appendData()、deleteData()、insertData()、createTextNode()、splitText()……
原生js——与text有关的属性、方法1.属性、属性值：.nodeType：；.nodeName：#text；.nodeValue (也可以通过data属性来访问 )：标签里面的文本内容；.parentNode：Element；无子节点；若要查看其他属性值，直接在控制台输出即可；2.方法：appendData( textContent )：在节点末尾插入指定的文...原创 2019-02-26 14:05:33 · 1671 阅读 · 0 评论 -
原生js——与element有关的属性和方法：setAttribute()、getAttribute()、removeAttribute()等
原生js——与element有关的属性和方法1.属性、属性值：.nodeType：1；.nodeName：元素的标签名；.nodeValue：null；.parentNode：Document || Element；若要查看 Element 的其他属性值，直接在控制台输出即可；.tagName( nodeName )：元素的标签名；.id：元素i...原创 2019-02-25 15:33:34 · 1237 阅读 · 0 评论 -
原生js——与node有关的属性和方法：hasChilsNodes()、appendChild()、removeChild()、replaceChild()、insertBefore()等
原生js—Node属性和方法1.nodeType：类型为1-12；最常用的节点类型：Node.ElEMENT_NODE：元素节点，node.type == 1；Node.ATTRIBUTE_NODE：特性节点，node.type == 2；Node.TEXT_NODE：文本节点，node.type == 3；Node.COMMENT_NODE：注释节点，node.type...原创 2019-02-25 15:31:54 · 488 阅读 · 0 评论 -
原生js——与document有关的属性和方法：querySelector()、domain、referrer、querySelectorAll()、URL等
原生js—Document属性和方法1.属性：nodeType：9；nodeName：#document；nodeValue：null；parentNode：null；ownerDocument：null；若要查看 document 的其他属性，直接在控制台输出即可；.documentElement：取得整个<html&原创 2019-02-25 15:29:30 · 676 阅读 · 0 评论 -
原生js—clientX、clientY、screenX、screenY、offsetX、offsetY、pageX、pageY、x、y
原生js—clientX、clientY、screenX、screenY、offsetX、offsetY、pageX、pageY、x、yclientX、clientY：相对于浏览器的可视区域（inner部分，也就是body的起始位置 ) 左上角（0,0）的坐标，会随滚动条的滚动而改变；screenX、screenY：相对于设备屏幕左上角（0,0）的坐标；offsetX、offs...原创 2019-02-24 15:36:28 · 1631 阅读 · 0 评论 -
原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解
**对js里面的各种宽、高的理解**1.首先对 window对象 、 document对象 做一个区别;window ：窗口（整个浏览器窗口），包含document;document ：整个HTML文档；2.与 window 相关的宽、高：window.innerWidth：整个浏览器窗口的宽度；window.innerHeight：整个HTML文档的高度（body的高度）...原创 2019-02-23 16:20:07 · 3855 阅读 · 0 评论 -
原生js-—动态原型模式、寄生构造函数模式、稳妥构造函数模式
js-—动态原型模式、寄生构造函数模式、稳妥构造函数模式1.动态原型模式（要new）:举例： function Model(name,age,hobby){ this.name = name; this.age = age; this.hobby = hobby; //方法(如果show()方法不存在，才会动态添加，而且这个方法在初次调用构造函数才会执行，不调...原创 2019-02-22 16:24:17 · 268 阅读 · 0 评论 -
原生js-—工厂模式、构造函数模式、原型模式
js里面常见的设计几种模式1.工厂模式（不需要new）：用函数来封装以特定接口创建对象的细节;来看一个例子，就明白啦; function createObject(name,age,hobby){ var o = {}; o.name = name; o.age = age; o.hobby = hobby; o.show = function(){ a...原创 2019-02-22 16:23:25 · 531 阅读 · 0 评论 -
原生js——轮播图、焦点图的实现
原生js轮播图、网页轮播图的实现1.Demo展示：2 . Html布局： <div class="main"> <div id=&原创 2019-02-22 12:43:37 · 775 阅读 · 0 评论 -
原生js——抽奖系统（bootstrap引用）
原生js——抽奖系统（bootstrap引用）前提：需引入bootstrap在线连接1.案例演示：2.代码示例：外部css <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR...原创 2019-09-05 14:43:54 · 775 阅读 · 0 评论