- 博客(49)
- 收藏
- 关注
RSS订阅原创 JavaScript获取图片的file对象数据（不通过input）
JavaScript不通过input标签，来获取图片的file对象，实现图标库功能
2022-08-30 23:30:53
3856
3
原创 react中使用events进行组件通信（类组件）
兄弟组件通信，组件A传递数据到组件Bimport React, { Component } from "react";import { EventEmitter } from "events";// 创建全局事件管理器对象const eventBus = new EventEmitter();// 子组件Aclass A extends Component { componentDidMount() { // 注册事件say eventBus.addListener(..
2021-12-08 20:49:26
1238
原创 react项目webpack基本配置
react项目中可以直接使用sass，直接安包即可 npm i node-sassreact项目中使用less，需要配置webpack暴露webpack配置：npm run eject安包 npm i less@2.x less-loader@5.x，注意版本问题，默认安装最新版本会出问题配置 webpack.config.js // 配置less第一处 const lessRegex = /\.less$/; const lessModuleRegex = /\.modu..
2021-10-20 22:17:20
1030
原创 JSX可写闭包
<div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="./../js/react.development.js"></script> <!-- 引入react-dom 用于react操作dom --> <script type="text/javascript" src="./../js/react-dom.d.
2021-06-21 14:26:45
92
原创 JSON.parse()和JSON.stringfy()使用注意事项
JSON.parse()作用：用于解析JSON字符串，返回该字符串所描述的JavaScript值或对象。注意：被解析的json字符串必须遵守JSON规范，也就是字符串整体单引号包裹双引号例如：若被解析的字符串为对象，则**对象的键（key）必须使用双引号包裹，如果对象的值（value）**为String类型则也需使用双引号包裹，字符串整体则用单引号包裹：'{"name": "tomhe", "age": 21}'若被解析的字符串为数组，并且数组中的元素为字符串类型，则数组中的元素必须使用双引号包
2021-06-11 08:13:49
850
2
原创 谷歌插件开发之笔趣阁
前言最近在笔趣阁上看小说，感觉通过鼠标滑轮滚动来翻页、鼠标点击切换上一章下一章有点麻烦，所以就写了一个小插件来简化操作。插件实现功能：可以通过键盘上的w按键和s按键来向上向下翻页，通过键盘上的a按键和d按键来跳转上一章下一章。插件目录结构具体代码manifest.json 代码{ "manifest_version": 2, "name": "笔趣阁插件", "version": "2.0", "description": "简化下一页上一章下一章操作",
2021-05-15 19:05:26
673
原创 vue-router嵌套路由切换外层路由时不改变内层路由的定位状态
案例中的路由映射代码const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: () => import('./../components/Home'), meta: { title: 'home' }, children: [ { path: 'message', compone
2021-04-23 16:12:56
313
原创 vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
今天学习vue-router时出现如下报错，百度了一下，好像是vue-router版本不兼容的问题，解决方法为在router/index.js文件中加入一段代码报错提示信息报错代码需要插入的代码段const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err
2021-04-22 17:22:29
218
原创 python爬取表情包
之前用node爬过表情包, 最近刚好python大作业需要做一个爬虫的项目, 所以就用python再爬一下爬取网址: https://www.fabiaoqing.com/最终效果: 通过用户给定的关键词, 将该网站上所有有关该关键词的表情包都下载到同级目录中的image文件夹中具体代码如下:# @coding:utf-8# @Time : 2020/12/23 11:11# @Author : TomHe# @File : main.py# @Software : PyCharmimp
2020-12-24 19:02:47
702
8
原创 node爬取守望先锋图片
需求爬取守望先锋官网主页面的英雄图片和英雄图标通过观察页面源代码, 发现主页面的英雄信息不能直接通过源代码获取到, 而是以json的格式保存保存的, 通过访问该文件的链接, 来对主页面进行渲染, 所以可以通过访问该json数据的链接来获得图片的下载链接, 然后进行下载源代码如下:// 第三方模块 请求网页数据const axios = require('axios')// 核心模块 操作文件流const fs = require('fs')// 核心模块 操作文件路径 cons.
2020-11-16 22:59:52
247
原创 JavaScript正则匹配 多行内容
需求: 通过正则匹配给定代码块中的链接和标题刚开始是通过以下正则匹配的, 尝试之后匹配失败let reg = /<a href="(.*?)" class="">.<span class="title">(.*?)<\/span><\/a>/igs观察后发现是由于代码之间的换行引起的, 虽然修正模式加上了s, 但是还是需要在每次换行的位置加上.*?进行匹配, 使用一下正则就可以匹配成功let reg = /<a href="(.*?)" cla
2020-11-11 21:53:10
3654
原创 原生JS实现过渡效果的轮播图
说明刚开始是打算使用jQuery中的fadeIn和fadeOut方法来完成这种带有渐变效果的轮播图的，由于好长时间没有碰jQuery （实力不允许???? ） ，所以在用jQuery尝试了一下并且失败了之后，就打算使用原生的JavaScript来完成了。实现原理我首先在CSS中定义好了两个类，一个类是用于实现轮播时动画消失的效果，另一个类则是用于实现轮播时动画出现的效果；然后用到了JavaScript中关于类的基本的两个方法：add()和remove()；通过这两个来完成对类的增删，从而展现出轮播的
2020-06-27 18:29:52
2642
2
原创 chrome中如何截取整个网页
f12打开开发者工具ctrl + shift + p 打开隐藏的命令行输入框在输入框中输入：cap选择输入框中提示的第三个命令 Capture full size screenshot，并回车图片会自动下载到本地
2020-05-18 23:49:21
157
原创 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
原创 jQuery中事件的冒泡和默认行为
事件的冒泡什么是事件的冒泡？就是事件从子元素向父元素传递的一个过程如何阻止事件的冒泡？方式一：在事件的回调函数中加上return false;方式二：在事件回调函数的形参列表中添加event，然后在回调函数中调用event.stopPropagation();.事件的默认行为什么是事件的默认行为？就是像a标签那样，没有绑定事件，但只要点击了就会自动跳转的行为像提交按钮一样，...
2020-05-06 22:20:08
466
原创 原生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
1532
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
398
原创 JavaScript实现tab选项卡效果
css代码<style> *{ margin: 0; padding: 0; } .container{ width: 500px; /*height: 700px;*/ border: 1px solid #000;...
2020-04-30 21:38:56
287
原创 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
原创 实现dom中video对象的时间戳控件
功能：自定义视频播放器中的时间戳控件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时间戳</title> <style> *{ margin: 0; ...
2020-04-26 22:25:20
418
原创 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
155
原创 数组中的map方法
作用：通过指定函数对数组进行处理，并将处理后的结果以新数组的形式返回注意点：不会改变原数组，只是将处理后的结果以新数组的形式返回参数：该方法可以接收两个参数第一个参数是函数，数组中的每个元素都会执行该函数，并且是必须要传的传入函数的三个参数currentValue 为当前元素的值 必传index 当前元素的索引 可以省略arr 当前数组 也可以省略第二个参...
2020-04-24 22:44:16
2882
原创 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
173
原创 JavaScript中的拖拽事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> div{ width: 100px; height...
2020-04-14 10:25:08
118
原创 JavaScript中事件的绑定
JavaScript中的addEventListener()函数大多数浏览器都可以正常使用，但是却不兼容IE8及其以下的浏览器，所以我们可以自定义一个专门用于绑定事件的函数bind()，无论是什么浏览器，都可以正常使用。在这个函数中，需要使用到IE专用的attachEvent()函数，需要传递的形参分别是：需要绑定事件的对象，绑定事件的名称，以及回调函数，function bind(obj, ...
2020-04-13 22:08:13
80
原创 盒子跟随鼠标移动而移动(兼容IE8)
需求 通过JavaScript使使盒子跟随着鼠标的移动而移动，并且当页面出现滚动条时，盒子也会跟随鼠标正常移动（兼容IE8）代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div跟随鼠标移动</title&g...
2020-04-12 20:53:59
322
原创 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
原创 JavaScript检测滚动条是否滚动到底部
简介scrollHeightscrollTopclientHeight代码核心代码: scrollHeight - scrollTop = clientHeight<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
2020-04-11 09:41:07
167
原创 自定义getStyle方法获取元素样式
兼容性兼容性如下图所示（摘自 mdn）解决方法由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上，而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式，所以我们就可以自定义一个getStyle方法来解决兼容性的问题代码自定义getStyle()代码function getStyle (obj, name) { if (obj.cur...
2020-04-10 21:18:33
353
原创 JavaScript实现简单的图片切换功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: ...
2020-04-09 13:31:01
579
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
87
原创 JavaScript中的作用域
1.全局作用域JavaScript中，在{}外面的作用域，我们就称之为全局作用域 //全局作用域 var num1 = 123; let num2 = 456; if(...){ ... }2.局部作用域JavaScript中，在函数后面{}中的作用域，我们就称之为局部作用域 //局部作用域 function test() { console.l...
2020-04-06 20:55:05
101
原创 通过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
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人