![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 57
littleHiuman
好好学习,天天向上。
展开
-
JavaScript 简单判断 移动端、PC端
JavaScript 简单判断 移动端、PC端原创 2023-02-16 11:32:05 · 212 阅读 · 0 评论 -
JS判断当前设备类型:手机/平板/电脑
JS判断当前设备类型:手机/平板/电脑转载 2023-02-16 11:24:45 · 758 阅读 · 0 评论 -
6位验证码输入框(vue)
6位验证码输入框(vue)原创 2023-02-15 12:02:03 · 326 阅读 · 0 评论 -
一个前端的常用方法的工具库,包含CSS的、JavaScript的……
一个前端的常用方法的工具库,包含CSS的、JavaScript的……原创 2022-06-06 12:25:25 · 114 阅读 · 0 评论 -
ES9 命名捕获组
ES9引入了命名捕获组,允许为每一个组匹配指定一个名字,既便于阅读代码,又便于引用。转载 2022-05-06 17:48:18 · 350 阅读 · 0 评论 -
获取最近的(一个或多个)周几
比如拿到今天往后 最近的 5个 周二(不包括今天)weekday 是周几,参数范围是 0 - 6,0 代表周日num 是个数startDay 是开始计算的时间,是时间戳方法及例子如下:function getDays(weekday, num, startDay, lastResult) { // 判断 if ([0, 1, 2, 3, 4, 5, 6].indexOf(weekday) === -1) { return 'weekday 错误' } i..原创 2022-04-08 15:36:30 · 210 阅读 · 2 评论 -
使用正则表达式 匹配 HTML 标签内的内容
使用正则表达式 匹配 HTML 标签内的内容正则表达式如下/(?<=((<.*?){0,}>))([\s\S]+)(?=(([\s]{0,1}<\/.*?>){1}))/g测试例子:var regexp = /(?<=((<.*?){0,}>))([\s\S]+)(?=(([\s]{0,1}<\/.*?>){1}))/g// 简短的 htmlvar str1 = `<div>hello</div>原创 2022-04-07 19:15:08 · 6004 阅读 · 0 评论 -
获取 JSON 对象的长度以及判断 JSON 对象是否为空
(如有错敬请指点,以下是我工作中遇到并且解决的问题)= = = = = = = = = = = = = = = = 获取Json对象的长度 = = = = = = = = = = = = = = = = = = 假设json为:……原创 2016-09-06 10:35:24 · 908 阅读 · 0 评论 -
【工具】根据 swagger 生成 axios 请求配置文件 / api
根据后端提供的 swagger 生成配置文件(JavaScript 文件)【简单的说,就是生成 api 目录】github 地址在这里:github.com/littleHiuma…用法假设后端提供的 swagger 地址是 http:255.255.255.255:3000/swagger-ui.html ,只需要取前面部分就可以了(ip 加端口:http:255.255.255.255:3000)一个 ip 的情况下: node generateIt.js --ip=http:255原创 2021-11-02 10:53:06 · 683 阅读 · 0 评论 -
React -- router的使用
基本路由的使用:import React from 'react'import { BrowserRouter as Router, // 浏览器路由,要放在应用程序的最外层组件中 Route, // 设置/匹配路由规则 Link, // 设置链接 Switch} from 'react-router-dom'// 组件function Home() { return <h2>Home</h2>}function About() { re原创 2021-04-02 18:52:32 · 195 阅读 · 0 评论 -
React -- context用法
关键API:React.createContext()创建context后,可以拿到Provider和Consumer,那么就可以提供数据和消费数据了// userContext.jsimport React, { Component } from 'react'const userContext = React.createContext('default value') // 提供默认值const UserProvider = userContext.Providerconst Us.原创 2021-04-02 17:49:08 · 205 阅读 · 0 评论 -
React -- ref的用法
需求:点击按钮让input文本获取焦点input文本框以及让文本框获取焦点的方法定义在input组件中在App组件中引入input组件,按钮定义在App组件中Input.js// Input.jsclass Input extends Component { constructor() { super() this.inputRef = React.createRef() this.focusInput = this.focusInput.bind(th.原创 2021-04-02 16:47:09 · 155 阅读 · 0 评论 -
RGB颜色值与十六进制颜色码转换(在线)
RGB颜色值与十六进制颜色码转换工具:https://littlehiuman.github.io/19-ColorValueChange/可以根据RGB颜色值转换成十六进制颜色码,也可以根据十六进制颜色码转换成RGB颜色值页面UI比较粗糙,但是能实现想要的功能。...原创 2021-03-31 08:29:39 · 1230 阅读 · 0 评论 -
JavaScript实现vue-router的路由跳转
vue-router有两种模式:history模式和hash模式。路由跳转路由跳转的方式有三种:go()、push()、replace()go()在两个模式下,使用的都是window.location.go()来实现的push和replace在两个模式下,实现有点不同。 push() replace() history模式 浏览器支持history.pushState的话,通过history.pushState()来实现; 否则,通过wind..原创 2020-12-31 14:51:40 · 508 阅读 · 1 评论 -
项目中地址跳转有误问题 / a标签跳转 / window.open() / location.href
当跳转的地址不是以http或者https开头的话,跳转的地址会拼接后面或者替换当前路由,导致跳转错误,比如:1.拼接在后面当前地址是:https://www.baidu.com/跳转的地址是:baidu.com得到的地址是:https://www.baidu.com/baidu.com2.替换当前路由当前地址是:file:///C:/Users/Administrator/Desktop/test.html跳转的地址是:baidu.com得到的地址是:file:///C:/U原创 2020-12-31 11:06:25 · 1082 阅读 · 0 评论 -
常见问题 / 遇到的问题的解决办法
GitHub中PR(Pull request)操作https://www.cnblogs.com/momo798/p/11599679.htmlaxios封装(二)队列管理https://www.cnblogs.com/small-coder/p/9133375.html原创 2020-12-30 16:06:02 · 98 阅读 · 0 评论 -
JavaScript获取css的值
1. 拿到元素的内联样式:elem.style.xxx2. 拿到元素的位置信息:getComputedStyle(elem)3. 拿到元素的计算样式:elem.getBoundingClientRect()原创 2020-12-25 11:42:34 · 123 阅读 · 0 评论 -
JavaScript判断变量的类型(判断基本类型、判断引用类型)
通过typeof来判断typeof undefined // undefined typeof 1 // number typeof '1' // string typeof true // boolean typeof function() {} // function // 以下类型需要别的方式判断typeof null // object typeof {} // object typeof [] // object通过instanceof来判断{} instance原创 2020-12-23 14:56:15 · 133 阅读 · 0 评论 -
用JS创建10个<a>标签,点击的时候弹出来对应的序号
利用闭包的方式for (var i = 0; i < 10; i++) { var aObj = document.createElement('a') aObj.innerText = 'a标签' + i aObj.onclick = (function (i) { return function () { alert(i) } })(i) document.body.appendChild(aObj)}利用块级作用域的方式for (原创 2020-12-23 14:37:52 · 713 阅读 · 0 评论 -
【工具】根据 swagger 生成 axios 请求配置文件 / api
根据后端提供的swagger生成配置文件(JavaScript文件)【简单的说,就是生成api目录】github地址在这里:github.com/littleHiuma…用法假设后端提供的swagger地址是http:255.255.255.255:3000/swagger-ui.html ,只需要取前面部分就可以了(ip加端口)一个ip的情况下:node generateIt.js --ip=http:255.255.255.255:3000多个ip的情况下(使用,来分割):nod..原创 2020-12-15 17:07:02 · 1358 阅读 · 2 评论 -
JavaScript 正则表达式 零宽断言
介绍:零宽断言的意思是(匹配宽度为零,满足一定的条件/断言)零宽断言用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们像\b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言)。分类:零宽断言分为两类:1. 正向零宽断言2. 负向零宽断言零宽断言分为四种:1. 正向零宽先行断言:x(?=y),表示:x 被 y 跟随时匹配 x2. 正向零宽后发断言:(?<=y)x,表示:x 跟随 y 的情况下匹配 x3. 负向零...原创 2020-12-15 17:06:47 · 875 阅读 · 0 评论 -
JavaScript中数组去重、对象去重的方法
ES6提供了新的数据结构:Set 和 Map,在写去重代码时方便了很多人,可以用更少的代码去实现去重。这两者都是构造函数,需要通过new去生成。这两者的区别就是:Set类似于数组,Map类似于对象数组去重const array = [1, 2, 3, 4, 5, 5, 5, 5]const set = new Set(array)const result = [...set] // Array.from(set)// 简写const result = [...new..原创 2020-12-15 17:05:42 · 178 阅读 · 0 评论 -
JavaScript+CSS+HTML 编写手风琴效果
效果图:可以通过https://littlehiuman.github.io/03-Accordion/查看效果。https://github.com/littleHiuman/littleHiuman.github.io求点star~~~代码如下:* { margin: 0; padding: 0;}.container { position: relative; width: 520px; height: 400px; overfl...原创 2020-12-15 17:03:17 · 257 阅读 · 0 评论 -
JavaScript 基本类型的类型转换
这里主要讲的是将其他的数据类型转换成Number、String、Boolean类型,欢迎补充~!转换成Number类型1. Number()函数,如:vara = "123"; a= Number(a); 1.1 如果是纯数字的字符串,则直接将其转换为数字;如果字符串中有非数字的内容,则转换为NaN;如果字符串是一个空串或者是一个全是空格的字符串,则转换为0 1.2 true转换为1,false转换为0 1.3 null转换为0;undefined转...原创 2020-12-15 17:02:45 · 95 阅读 · 0 评论 -
JavaScript 获取随机整数
Math.random()方法会返回介于 0(包含) ~ 1(不包含) 之间的一个随机数假如想要拿到0-10之间的数,只需要将该方法的值*10 即Math.random()*10;假如想要拿到0-20之间的数,同理,只需要将该方法的值*20 即Math.random()*20;那么,想要拿到0-n之间的数,n是整十倍的数,即Math.random()*n。想要拿到1-11之间的数呢?就是在0-10的基础上,加上1 即Math.random()*10+1;即 想要拿到m-n...原创 2020-12-15 17:01:19 · 7528 阅读 · 0 评论 -
HTML+CSS+JS(+Vue)写一个通讯录组件
求各位大大的Star(*/ω\*)。没有录屏,所以上传的是图片。后面已补充录屏效果。效果:(主要是参考小米Note3的通讯录的效果做的)主要功能:1. 滚动后,通讯录的模块标题会固定在顶部(图2)2. 下一个标题很接近时,将上一个标题推上去的效果(过程:图3、图4、图5)实现:1. 模块标题会固定在顶部:这个实现比较简单,监听滚动的距离,如果大于0(相对的0)就显示固定的标题。2. 推上去的效果:实际上是修改固定的标题的top值,导致的视觉错觉。当下一个标题距离顶部.原创 2020-12-15 17:00:30 · 763 阅读 · 0 评论 -
构造函数、原型对象prototype、实例、隐式原型__proto__的理解
(欢迎一起探讨,如果有什么地方写的不准确或是不正确也欢迎大家指出来~)PS:建议将构造函数中的方法都定义到构造函数的原型中,那么由该构造函数创建的实例的方法都会指向同一个方法。(在构造函数内部声明的话,每创建一个实例都会重新实例化函数,那么每个实例中的函数的指向是不同的;如果定义在全局作用域中,且有很多方法,这样毫无封装性可言。)一、属性和方法构造函数可以定义三种属性和方法:对象属性/对象方法:构造函数内定义的属性/方法静态属性/静态方法:构造函数的静态属性/方法原型属性/原型方法原创 2020-12-15 16:59:39 · 1065 阅读 · 0 评论 -
js生成当前日期起,一周内的日期+周几/今日
效果有两种:两者区别是 1.第一天(今天)显示今日 2.第一天(今天)显示周几(第一个图是在手机上显示的效果,第二个是PC网页上显示的效果)……原创 2016-09-08 10:41:46 · 801 阅读 · 1 评论 -
布局:左侧菜单栏+右侧内容(改进版,有js动画效果)
[color=blue][size=small](如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版[/size][/color][size=small]这是上一篇文章的改进。上一篇文章的左侧菜单是没有子目录的。这是效果图:[/size][img]http://dl2.iteye.com/upload/attachment/0119/9316/4e...原创 2016-09-09 10:25:42 · 1719 阅读 · 0 评论 -
js实现输入框搜索提示功能
[size=small]html代码:[/size][code="html"] #container{ position:absolute; left:50%; top: 40%; } #content{ ...原创 2016-09-12 17:00:03 · 475 阅读 · 0 评论 -
实时监听输入框值变化
[size=small](1)使用 jQuery 的话,同时绑定 oninput 和 onpropertychange 两个事件就可以了,代码:[/size][code="jQuery"]$('#username').bind('input propertychange', function() { $('#content').html($(this).val().length ...原创 2016-09-13 10:35:27 · 690 阅读 · 0 评论 -
JavaScript 阻止事件冒泡的方法
[size=medium]JavaScript停止冒泡和阻止浏览器默认行为事件兼容[/size][code="js"]function myfn(e){ var evt = e ? e:window.event;}[/code][size=medium]js停止冒泡[/size][code="js"]function myfn(e){ w...原创 2016-09-18 15:55:36 · 507 阅读 · 0 评论 -
原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
[size=small]介绍:1、hasClass:判断DOM元素是否存在类。2、addClass:为的DOM元素添加类。3、removeClass:删除DOM元素的类。4、toggleClass:如果DOM元素存在(不存在)类,就删除(添加)类。原生 JavaScript 实现的代码:[/size][code="js"]// 实现方法2:传入一个数组f...原创 2016-10-13 17:56:24 · 212 阅读 · 0 评论 -
javascript写的轮播图
欢迎指点!先放上效果图:[img]http://dl2.iteye.com/upload/attachment/0121/0682/d62541c0-629d-38e0-bff9-21b61c95295b.png[/img]鼠标移入界面后:[img]http://dl2.iteye.com/upload/attachment/0121/0684/aa7a658a-6a39-...原创 2016-11-07 12:15:55 · 117 阅读 · 0 评论 -
选项卡效果的菜单栏
欢迎指点!效果图:[img]http://dl2.iteye.com/upload/attachment/0121/0687/e763b0f9-fc13-31b2-a191-4dc0fc2b3ccb.png[/img]有两种办法实现:原理一:多个html文件之间的跳转。(多个html文件)原理二:显示隐藏。(一个html文件)[size=medium] = ...原创 2016-11-07 13:47:23 · 142 阅读 · 0 评论 -
比较全的屏幕信息
比较全的屏幕信息。[img]http://dl2.iteye.com/upload/attachment/0121/0698/8875abb1-5e1c-3924-854e-bc4149cb10d9.jpg[/img][code="js"]function getInfo() { var s = ""; s += " 网页可见区域宽:" +document.body...原创 2016-11-07 14:13:31 · 167 阅读 · 0 评论 -
实现可拖动的轮播图,使用swiper插件
[color=blue][b](涉及到swiper.min.js,swiper.min.css,记得导入这两个文件。)[/b][/color]两种样式:1)标题 + 页数。[img]http://dl2.iteye.com/upload/attachment/0121/0709/97341b65-5a5e-33df-8906-e47feca43771.png[/img]2)...原创 2016-11-07 14:55:42 · 1608 阅读 · 0 评论 -
得到两数相除的百分数
[size=small][b][color=blue]原理:[/color][/b][/size][code="js"]Math.ceil() //向上取整Math.floor() //向下取整Math.round() //四舍五入取整[/code][size=small][b][color=blue]第一种:得到的是整数[/color][/b][/size]...原创 2016-12-20 15:42:06 · 977 阅读 · 0 评论 -
javascript 实现购物车页面
跟商城有关系的网站,难免会有购物车的结账界面。我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。欢迎指点!~原创 2017-02-06 18:46:48 · 4422 阅读 · 4 评论 -
布局:上方菜单栏+下方内容
[size=small][color=blue][b]常见的菜单栏+内容界面。欢迎指点。效果图:[img]https://github.com/littleHiuman/littleHiuman.github.io/blob/master/show01.png?raw=true[/img]可以戳这里看效果[url]https://littlehiuman.github.io/m...原创 2017-03-10 09:35:02 · 323 阅读 · 0 评论