JavaScript
关注
分享
扫一扫
Test_晓
这个作者很懒，什么都没留下…
展开
-
手把手教你用原生JS实现瀑布流
看完这一篇一万字的blog，不可能不会瀑布流布局！！！原创 2020-04-29 16:33:34 · 7057 阅读 · 3 评论 -
写个前端小游戏
代码尽管拿去哄女朋友叭！！！原创 2020-04-24 19:23:00 · 17355 阅读 · 65 评论 -
var、let和const详解
文章目录var和let什么是变量作用域var存在的问题用闭包解决var没有块级作用域的问题用let解决var没有块级作用域的问题var和let的区别总结const使用const建议和注意事项var和letvar和let都是用于声明变量的，但两者有区别什么是变量作用域变量作用域指的是变量在什么范围内是可使用的var存在的问题以下面一个实例来展示。在这个示例中有五个button，我们希望点...原创 2020-03-25 16:02:35 · 456 阅读 · 0 评论 -
scroll家族
文章目录scroll家族属性scroll兼容性问题CSS样式怪异模式下的兼容严格模式下的兼容所有版本兼容高版本浏览器兼容兼容综合写法示例图scroll家族属性document.body.scrollWidth：网页正文全文宽document.body.scrollHeight：网页正文全文高document.body.scrollTop：网页正文被移去的高（滚动高度）document.b...原创 2020-03-22 13:26:10 · 387 阅读 · 0 评论 -
严格模式和怪异模式
文章目录概念使用使用范围兼容性问题示例CSS样式JS代码谷歌显示IE浏览器显示概念早期的浏览器并不遵守W3C标准，这时候的解析方式就称之为怪异模式(quirks mode)。但随着W3C模式越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式就是严格模式(strict mode)使用document.compatMode值为 BackCompat ，则是怪...原创 2020-03-22 12:52:32 · 562 阅读 · 0 评论 -
用JS实现长图上下滚动（超详细）
文章目录案例描述案例图示HTMLCSSJS核心代码JS详解----监听鼠标进入事件（以盒子上半部分为例）JS详解----监听鼠标移出事件（以盒子上半部分为例）JS全部代码展示案例描述将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半部分时，图片向下滑直到到达图片的底部停止；当鼠标置于盒子的下半部分时，图片向上滑直到到达图片的顶部停止。案例图示HTML<div id="box...原创 2020-03-17 18:22:17 · 7685 阅读 · 2 评论 -
你想要的Date都在这里了
文章目录概念定时器定时器的循环执行Date常用方法一Date常用方法二Date格式转化的实现表白神器案例描述效果展示HTML+CSSJS核心代码概念Date对象基于1970年1月1日（世界标准时间）起的毫秒数定时器需求：1、JS程序的执行速度是费差个快的，如果希望一段程序，可以每隔可一段时间执行一次，可以使用定时调用2、某一程序需要在延迟多少时间后执行，可以使用定时器调用定时器的循环...原创 2020-03-15 16:22:51 · 366 阅读 · 0 评论 -
用JS如何实现判断上传文件是否符合格式要求？
文章目录案例描述基础知识效果展示页面加载完毕上传一张图片上传的不是一张图片HTML 代码JS实现代码案例描述在浏览器中上传一个文件，判断该文件是否为符合要求的图片（jpg png gif），如果上传的十一张符合要求的图片，浏览器弹出“是一张图片”的警告。若不是，则弹出’请传入一张图片’的警告基础知识用到JS中的onchange监听用户上传的文件类型效果展示页面加载完毕上传一张图片...原创 2020-03-14 10:00:56 · 3193 阅读 · 0 评论 -
看完这个，鼠标失焦和获焦还怕不会用？
文章目录基础知识效果展示HTML代码JS实现代码基础知识鼠标失去焦点和获得焦点在表单中是最常见的鼠标获得焦点：用到的是JS中的onfocus鼠标失去焦点：用到的是JS中的onblur效果展示页面加载后鼠标获得焦点鼠标失去焦点HTML代码<input type="text" placeholder="请输入账号">JS实现代码<s...原创 2020-03-14 09:50:18 · 780 阅读 · 0 评论 -
案例 | 既涉及到闭包又涉及到let和var区别
文章目录案例描述HTML代码css样式JS代码常用方法改进方法一改进方法二案例描述鼠标移动到任何一张小图上，将在大图位置展现此小图，展示如下。很明显这个案例要用到JS中的onmouseover但这个案例有几个方法可以实现，接下来就来看看吧HTML代码<body><div id="box"> <ul> <li id=...原创 2020-03-12 20:44:34 · 161 阅读 · 0 评论 -
JS中浅克隆与深克隆
文章目录浅克隆浅克隆代码浅克隆图示深克隆深克隆代码深克隆图示浅克隆浅克隆是只克隆当前元素本身，里面子元素不克隆浅克隆代码 <div id="box"> <p class="child1">11</p> <button class="child2">点我</button></div><scrip...原创 2020-03-10 14:51:19 · 267 阅读 · 0 评论 -
JS中节点增减CD操作
文章目录增加节点操作代码一代码一图示代码二代码二图示删除节点操作代码三代码三图示增加节点操作代码一<div id="box"> <p class="child1">11</p> <button class="child2">点我</button></div><script> win...原创 2020-03-10 14:42:13 · 429 阅读 · 0 评论 -
浅谈rem
文章目录什么是rem示例一代码示例一图示示例二代码示例二图示什么是rem（1）rem可以在用户浏览页面时，根据屏幕的尺寸来向用户展示更适合用户的布局、文字、图片、按钮（2）rem是指相对于根元素的字体大小的单位 ，一旦根节点html定义的font-size发生变化，那么整个网页中运用到的rem也会发生变化（3）未经调整的浏览器符合：1rem = 16px示例一代码<style&g...原创 2020-03-10 14:28:12 · 179 阅读 · 0 评论 -
JS中节点之间的关系
文章目录基本样式和HTML获取父元素上一个兄弟节点下一个兄弟节点获取标签中第一个节点和最后一个节点获取所有元素节点基本样式和HTML <style> #box{ width: 300px; height: 300px; background-color: b...原创 2020-03-09 17:10:14 · 688 阅读 · 0 评论 -
JS文档页面元素获取|没有比这更详细的了
文章目录根据id获取元素根据标签名获取元素根据name获取元素根据类名获取元素根据选择器获取元素根据id获取元素使用document.getElementById(’【id名】’) <div id="demo"></div> <script> window.onload = function() { var a =...原创 2020-03-09 16:45:57 · 181 阅读 · 0 评论 -
只要一篇文章让你搞定JavaScript中的字面量、变量和常量
文章目录字面量定义举例变量定义语法初始化定义并初始化变量在内存中表现形式变量命名规则变量命名规范常量定义语法注意常量与变量异同常量与字面量异同经典面试字面量定义字面量就是一个值，比如变量的值或者是常量的值举例22 33.3等数值，'abc’等字符或字符串变量定义变量：定义完成后，可以修改的数据变量的默认值：undifined(易出错)语法var + 变量名称（es5）va...原创 2020-03-07 11:35:21 · 296 阅读 · 0 评论 -
JavaScript初学常见输出方式
文章目录弹窗window.alertdebugger控制台输出console.logconsole.warnconsole.error可以向body中输入一个内容document.write在网页中弹出输入框，用于接收用户输入的信息window.prompt在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用window.confirm弹窗window.alertwindow.al...原创 2020-03-07 10:42:03 · 124 阅读 · 0 评论 -
原生JS实现选项卡
文章目录案例描述HTML代码全部HTML代码展示HTML代码分解 ----头部HTML代码分解 ----内容CSS样式JS实现代码全部JS代码显示JS代码分解 ----头部样式改变JS代码分解 ----内容改变案例描述在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示默认的是...原创 2020-03-13 14:47:45 · 1485 阅读 · 0 评论 -
看完这个，九宫格布局小菜一碟
文章目录九宫格布局描述效果展示页面加载完点击【三列按钮】算法思想（以三列为例）原理算法HTML代码CSS样式JS实现代码JS详解-----封装JS详解----九宫格算法实现函数九宫格布局描述在浏览器中有n张图片（我这里是是十一张图片），兰兰其顶部有三个button(内容分别是三列、四列、五列)，点击任和一个按钮，图片将会以该列的形式展现在浏览器上效果展示页面加载完点击【三列按钮】点...原创 2020-03-14 11:24:46 · 974 阅读 · 1 评论 -
用JS逐步分解实现放大镜（看完就有收获）
文章目录案例描述案例图示HTMLCSS样式JS代码JS分解代码----小图点击事件JS分解代码----鼠标进入和移出JS分解代码----鼠标的移动JS分解代码----碰撞事件，放大镜的移动JS分解代码----超大图的位置改变JS全部代码展示案例描述在浏览器的左边有一张大图，下面有两张小图，点击任何一张小图会在大图的位置显示这张小图的画面。进入大图，鼠标所指之处有一个透明的黄色区域，而在大图的右...原创 2020-03-21 17:22:04 · 250 阅读 · 0 评论 -
JS事件对象
文章目录事件对象概念event常见属性clientX和clientY、screenX和screenY、pageX和pageY的区别图示示例示例一示例二事件对象概念比如onclick、onfocus、onmousedown、onmouseover…都称作事件对象示例： btn.onclick = function(event){ //这里的event就是当前事件的对象...原创 2020-03-21 16:40:14 · 598 阅读 · 0 评论 -
offset家族
文章目录offset家族概念offset家族五大属性之offsetWidth 和 offsetHeight示例offset家族五大属性之offsetLeft 和 offsetTop示例父盒子无定位父盒子有定位offsetLeft 和 offsetTop 总结offset家族五大属性之 offsetParent示例style.***与offset.***的区别offset家族概念offset用于...原创 2020-03-20 14:37:11 · 445 阅读 · 0 评论 -
带你实现轮播切换（超详细）
文章目录案例描述案例图示HTMLCSSJS核心代码案例描述在浏览器中每相隔一秒钟切换一张图片，图片相对应的图片解释也跟着改变。案例图示HTML详解请看注释<body> <div id="box"> <ul class="left"> <li class="current"><a hr...原创 2020-03-20 11:14:30 · 940 阅读 · 0 评论 -
匀速动画VS缓动动画（超详细）
文章目录匀速动画匀速动画案例描述匀速动画案例图示HTML+CSS匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示HTML+CSS缓动动画JS代码缓动动画JS代码改进----函数封装匀速动画匀速动画案例描述在浏览器中，某一个盒子以一定不变的速度向右移动直到停止匀速动画案例图示HTML+CSS<style> #box { ...原创 2020-03-19 20:55:14 · 820 阅读 · 0 评论 -
五十行代码实现简易点名神器
文章目录案例描述案例展示HTML + CSSJS代码JS详解-----封装函数JS详解----核心代码JS全部代码展示案例描述点击开始按钮，名字开始在浏览器上滚动。点击结束按钮，名字滚动停止，浏览器上出现某一个人的名字，完成点名案例展示HTML + CSS<body> <div id="box"> <div id="name...原创 2020-03-18 17:12:56 · 817 阅读 · 0 评论 -
防止定时器重叠问题
文章目录描述图示定时器重叠问题HTML+CSSJS-----定时器重叠代码JS-----解决定时器重叠代码描述在浏览器中设置一个正方体盒子，当鼠标进入该盒子时，启动定时器。定时器完成在控制台一秒打印出一个数字的功能图示定时器重叠问题但以上描述实现时存在一个问题。当鼠标多次进入该盒子时，控制台以远远小于一秒的速度打印出一个数字的功能。这就是定时器重叠问题。原因 ： 每当鼠标进入一次，就...原创 2020-03-17 19:53:28 · 1125 阅读 · 1 评论