![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 53
TomHe789
这个作者很懒,什么都没留下…
展开
-
JavaScript获取图片的file对象数据(不通过input)
JavaScript不通过input标签,来获取图片的file对象,实现图标库功能原创 2022-08-30 23:30:53 · 3869 阅读 · 3 评论 -
JavaScript响应式数据的实现(object)
JavaScript实现对象类型的响应式数据原创 2022-07-18 22:31:12 · 665 阅读 · 0 评论 -
JSON.parse()和JSON.stringfy()使用注意事项
JSON.parse()作用:用于解析JSON字符串,返回该字符串所描述的JavaScript值或对象。注意:被解析的json字符串必须遵守JSON规范,也就是字符串整体单引号包裹双引号例如:若被解析的字符串为对象,则**对象的键(key)必须使用双引号包裹,如果对象的值(value)**为String类型则也需使用双引号包裹,字符串整体则用单引号包裹:'{"name": "tomhe", "age": 21}'若被解析的字符串为数组,并且数组中的元素为字符串类型,则数组中的元素必须使用双引号包原创 2021-06-11 08:13:49 · 853 阅读 · 2 评论 -
原生JS实现过渡效果的轮播图
说明刚开始是打算使用jQuery中的fadeIn和fadeOut方法来完成这种带有渐变效果的轮播图的,由于好长时间没有碰jQuery (实力不允许???? ) ,所以在用jQuery尝试了一下并且失败了之后,就打算使用原生的JavaScript来完成了。实现原理我首先在CSS中定义好了两个类,一个类是用于实现轮播时动画消失的效果,另一个类则是用于实现轮播时动画出现的效果;然后用到了JavaScript中关于类的基本的两个方法:add()和remove();通过这两个来完成对类的增删,从而展现出轮播的原创 2020-06-27 18:29:52 · 2646 阅读 · 2 评论 -
JavaScript中的oncopy事件
作用:当用户拷贝添加了oncopy事件的元素时触发使用方式:直接在HTML标签中添加该事件,通过JavaScript为指定元素添加该事件提示:如果想要禁止复制某个元素的内容,可以在该事件的函数中添加return: false;,禁止浏览器的默认行为例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>oncopy事件&..原创 2020-05-09 20:18:39 · 975 阅读 · 0 评论 -
jQuery中事件的冒泡和默认行为
事件的冒泡什么是事件的冒泡?就是事件从子元素向父元素传递的一个过程如何阻止事件的冒泡?方式一:在事件的回调函数中加上return false;方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stopPropagation();.事件的默认行为什么是事件的默认行为?就是像a标签那样,没有绑定事件,但只要点击了就会自动跳转的行为像提交按钮一样,...原创 2020-05-06 22:20:08 · 466 阅读 · 0 评论 -
原生JS实现简单的汇率转换问题
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http...原创 2020-05-03 23:13:25 · 1534 阅读 · 1 评论 -
jQuery中核心函数接收参数的类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery核心函数</title> <script src="../js/jquery-1.11.3.js"></script> ...原创 2020-05-02 22:38:03 · 401 阅读 · 0 评论 -
JavaScript实现tab选项卡效果
css代码<style> *{ margin: 0; padding: 0; } .container{ width: 500px; /*height: 700px;*/ border: 1px solid #000;...原创 2020-04-30 21:38:56 · 287 阅读 · 0 评论 -
ES6前后实现排它的两种写法
排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> </head><body&g...原创 2020-04-29 22:12:56 · 151 阅读 · 0 评论 -
实现dom中video对象的时间戳控件
功能:自定义视频播放器中的时间戳控件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时间戳</title> <style> *{ margin: 0; ...原创 2020-04-26 22:25:20 · 418 阅读 · 0 评论 -
JavaScript数组的sort方法常规用法
// 对普通数组进行排序 let nums = [1, 3, 4, -4, 2, 5, 1]; nums.sort(function (a, b) { // 升序 // return a - b; //降序 return b - a; }); ...原创 2020-04-25 22:44:29 · 156 阅读 · 0 评论 -
数组中的map方法
作用:通过指定函数对数组进行处理,并将处理后的结果以新数组的形式返回注意点:不会改变原数组,只是将处理后的结果以新数组的形式返回参数:该方法可以接收两个参数第一个参数是函数,数组中的每个元素都会执行该函数,并且是必须要传的传入函数的三个参数currentValue 为当前元素的值 必传index 当前元素的索引 可以省略arr 当前数组 也可以省略第二个参...原创 2020-04-24 22:44:16 · 2884 阅读 · 0 评论 -
JavaScript实现十五拼图(可调节难度)
css代码body { font-family: cursive; font-size: 14pt; text-align: center;}#puzzlearea { height: 400px; margin: 0 auto; position: relative; width: 400px;}.highlight { ...原创 2020-04-23 22:19:37 · 442 阅读 · 6 评论 -
JavaScript中的navigator(判断用户使用的浏览器)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Navigator</title> <script> // console.log(navigator); // 各大浏...原创 2020-04-15 22:28:41 · 174 阅读 · 0 评论 -
JavaScript中的拖拽事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> div{ width: 100px; height...原创 2020-04-14 10:25:08 · 120 阅读 · 0 评论 -
JavaScript中事件的绑定
JavaScript中的addEventListener()函数大多数浏览器都可以正常使用,但是却不兼容IE8及其以下的浏览器,所以我们可以自定义一个专门用于绑定事件的函数bind(),无论是什么浏览器,都可以正常使用。在这个函数中,需要使用到IE专用的attachEvent()函数,需要传递的形参分别是:需要绑定事件的对象,绑定事件的名称,以及回调函数,function bind(obj, ...原创 2020-04-13 22:08:13 · 81 阅读 · 0 评论 -
盒子跟随鼠标移动而移动(兼容IE8)
需求 通过JavaScript使使盒子跟随着鼠标的移动而移动,并且当页面出现滚动条时,盒子也会跟随鼠标正常移动(兼容IE8)代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div跟随鼠标移动</title&g...原创 2020-04-12 20:53:59 · 323 阅读 · 0 评论 -
JavaScript捕获鼠标坐标
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件对象</title> <style> .box1{ width: 300px; he...原创 2020-04-11 10:16:19 · 110 阅读 · 0 评论 -
JavaScript检测滚动条是否滚动到底部
简介scrollHeightscrollTopclientHeight代码核心代码: scrollHeight - scrollTop = clientHeight<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...原创 2020-04-11 09:41:07 · 167 阅读 · 0 评论 -
自定义getStyle方法获取元素样式
兼容性兼容性如下图所示(摘自 mdn)解决方法由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题代码自定义getStyle()代码function getStyle (obj, name) { if (obj.cur...原创 2020-04-10 21:18:33 · 353 阅读 · 0 评论 -
JavaScript实现简单的图片切换功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: ...原创 2020-04-09 13:31:01 · 583 阅读 · 2 评论 -
JavaScript定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器</title></head><body> <button id = "start">开始</button>...原创 2020-04-07 22:47:50 · 89 阅读 · 0 评论 -
JavaScript中的作用域
1.全局作用域JavaScript中,在{}外面的作用域,我们就称之为全局作用域 //全局作用域 var num1 = 123; let num2 = 456; if(...){ ... }2.局部作用域JavaScript中,在函数后面{}中的作用域,我们就称之为局部作用域 //局部作用域 function test() { console.l...原创 2020-04-06 20:55:05 · 101 阅读 · 0 评论 -
通过JavaScript创建表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id = "mountains"></div>&l...原创 2020-04-05 22:22:37 · 353 阅读 · 0 评论 -
JavaScript中的普通for循环和 for in循环
1.对数组的遍历 // 通过传统的for循环和for in循环遍历数组 let nums = [1, 3, 5, 7, 9]; for (let i = 0; i < nums.length; i++) { console.log(typeof nums[i] + nums[i]); } for (let i in nums) { ...原创 2020-04-05 20:28:46 · 174 阅读 · 0 评论 -
JavaScript中创建默认对象的方式
<script> //方式一 let obj1 = new Object(); obj1.name = "zs"; obj1.age = 18; obj1.gender = "male"; obj1.say = function() { console.log...原创 2020-04-04 22:27:04 · 153 阅读 · 0 评论 -
将字符串中的字母全部转换为大写字母/小写字母
<script> let str = "Hello World!"; // 将字符串的字符全部转换为小写字符 function lowerCase(str) { let arr = str.split(""); let newStr = ""; //通过for循环遍历数组 for (let i = ...原创 2020-04-03 22:22:15 · 6346 阅读 · 0 评论 -
JavaScript中数组的选择排序和冒泡排序
选择排序代码<script> let arr = [1, 4, 6, 8, -2]; console.log(arr); for (let i = 0; i < arr.length; i++) { for (let j = i; j < arr.length; j++) { if (arr[i] > ...原创 2020-04-02 15:42:27 · 71 阅读 · 0 评论 -
JavaScript中数组的常用方法
JavaScript中数组的常用方法1. 增加元素2. 删除元素3. 更改元素4. 查询元素5. 清空数组6. 逆置数组7. 拼接两个数组8. 将数组转换为字符串9. 取出指定范围的数据1. 增加元素在数组开头增加通过unshift方法注意点:该方法会返回增加后数组的长度例如:arr.unshift(data);含义:将data添加到arr数组的开头在数组末尾增加通...原创 2020-04-01 18:04:21 · 112 阅读 · 0 评论 -
JavaScript中数组的特点
1. JavaScript数组中的默认存储值是undefined,其它编程语言数组的默认存储值是0或者是垃圾数据2. 与其它的编程语言不同,JavaScript可以访问数组中不存在的索引,会返回undefined,而其它的编程语言会报错或返回垃圾数据3. JavaScript可以存储不同类型的数据,而其它的编程语言只能存储一种数据类型的数据4. 当JavaScript中数组的存储空间不够用时...原创 2020-03-31 09:29:47 · 452 阅读 · 0 评论 -
JavaScript中创建数组的方式
1. 通过构造函数创建数组创建一个指定大小的数组let 数组名称 = new Array(数组长度);创建一个空数组let 数组名称 = new Array();创建一个给定数据的数组let 数组名称 = new Array(data1, data2, data3...);2. 通过字面量创建数组创建一个空数组let 数组名称 = [];创建一个给定数据的数组let 数...原创 2020-03-31 08:47:25 · 516 阅读 · 0 评论 -
JavaScript中的arguements
JavaScript中的arguements作用用来保存所有传递给函数的实际参数注意点每个函数都有arguements,实际上它就是一个伪数组举例自定义函数,传入任意个数值,返回它们最终的和代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2020-03-30 21:46:30 · 190 阅读 · 0 评论