憨憨's-优快云博客

原创 JS-获取网页滑动距离，并实时监听

本文主要介绍通过JS获取网页滑动距离，并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。

2022-09-05 08:00:00 12327 1

根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用用法类似写css；querySelectorAll：返回一个元素数组。more。

2022-09-04 19:12:34 15731

原创 JS-判断 array/object中是否存在某个元素/key（键）-存在性、枚举

本文主要介绍判断数组中是否存在某个元素、并返回所有满足条件的元素；判断数组中的Object中是否存在某个满足条件的元素、并返回所有满足条件的元素、判断数组中的Object中是否存在某个key（键）

2022-01-02 21:58:43 18073

原创 JS-指定DOM点击全屏事件

介绍：本文将介绍通过点击按钮实现全屏，这样可以使得用户在该页面更加专注，屏蔽掉该页面之外的干扰。HTLM代码<div @click="fullScreen">全屏</div><div id="table">我是需要全屏的内容</div>JS代码点击触发全屏事件fullScreen() { const tableBox = document.getElementById("table"); tableBox && (table

2021-11-26 19:52:09 818

原创 git---配置（持续更新中~）

git config命令的–global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。查看git配置信息git config --list配置git commit的时候用到的用户信息查看git用户名、密码、邮箱的配置git config user.namegit config user.passwordgit config user.email设置git用户名、密码、邮箱的配置(全局)git config

2021-11-26 10:55:21 853

原创 JS-获取视频总时长

介绍本文主要介绍在获取到视频的URL之后，如何通过js方法获取视频的总时长，兼容了web页面、APP内嵌h5页面、小程序内嵌h5页面~适用场景：web页面、APP内嵌h5页面、小程序内嵌h5页面JS代码：一、获取视频时长方法注：其中getENVIR、checkIfIOS方法见链接：https://blog.youkuaiyun.com/weixin_43937466/article/details/121539118getVideoDuration(url) { // IOS的微信小程序中无法触

2021-11-25 15:36:21 9623

原创 JS-环境判断：小程序、公众号、浏览器、APP、安卓、IOS

介绍本文主要介绍获取当前页面所在的环境，区分微信小程序、微信公众号H5、浏览器、app环境，终端判断是否是IOS、是否是Android~JS代码：const ua = navigator.userAgent.toLowerCase();微信小程序、微信公众号H5、浏览器、app环境getENVIR: () => { const isWeixin = ua.indexOf('micromessenger') !== -1; const isInApp = /(^|;\s)app\/

2021-11-25 15:34:25 8669

原创讨论一下微信小程序中如何长按识别图片中二维码跳转

一、目前微信官方支持小程序原生页面在微信版本IOS≥8.0.6，安卓≥8.0.3时直接长按识别二维码，<image src="二维码图片地址" show-menu-by-longpress="true"></image>但是，这样识别的目前不支持跳转到对应页面（如添加好友），官方也证实这是当前版本的 bug ，并承诺会在下一个版本里面修复；二、小程序原生页面中，在微信版本IOS≥8.0.6，安卓≥8.0.3时支持通过点击放大图片，然后长按识别二维码，实现跳转功能：WXML

2021-06-04 20:47:30 16720 3

原创 Mac-搭建前端开发环境

说明：本文将介绍如何从零开始搭建前端开发环境详情参考：https://timor419.github.io/2021/05/30/Mac-set-front-environment/验证确保电脑环境干净，处于未安装node和npm状态终端命令行输入：node -v//command not foundnpm -v//command not found卸载终端命令行输入：sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node

2021-05-30 15:26:33 2011 1

原创 VSCode-Settings Sync 同步设置

说明：vscode作为使用开发的IDE工具深受广大码农的喜爱，但是其自身并不具备备份设置的功能，在更换电脑时这个问题显得尤为令人头疼，本文将详细介绍如何解决重新安装各种插件、配置各种快捷键、setting等问题。详情参考：https://timor419.github.io/2021/05/15/VSCode-Settings-Sync/我们可以借助 setting-sync 插件很好的解决更换电脑时重新安装各种插件、配置各种快捷键、setting等设置的问题，具体怎么操作，下面会一一介绍。一、创建

2021-05-15 18:35:36 1082

原创 CSS-文本换行处理-white-space

简介：本文主要介绍通过设置CSS的white-space属性来处理元素内的空白、空白符，以实现文本的不换行、自动换行、空白保留或合并。详情参考：https://timor419.github.io/2021/04/07/CSS-white-space/这边先列一下white-space可以设置的值，及其作用：一、normal作用：默认，空白会被浏览器忽略。HTML<div class="normal">这是一些文本。这是一些文本。这是一些文本。</div>

2021-04-07 23:12:05 3347 1

原创 CSS-微信小程序-部分ios机型按钮border丢失

问题：部分ios机型按钮border丢失，部分手机浏览器不能识别0.5px，当做0处理。在iPhone 11 Pro Max上显示效果如下图详情参考：https://timor419.github.io/2020/10/09/CSS-border/#more产生这样的代码如下：WXML<view class="second-time flex-row>文案</view>WXSS .second-time { width: 162rpx;

2020-10-09 11:44:12 1816

原创 JS-throttle-函数节流

前言在进行页面窗口的resize、scroll、输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果，这篇文章将主要分析函数节流。介绍函数节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。实现原理：当触发事件的时候，我们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到delay时间后，定时器执行执行函数，并且清

2020-08-08 16:42:01 656

原创 CSS-图片显示固定大小不压缩、不变形

需求说明：实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。原图↓：背景图↓：一、背景图首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。简单介绍一下background-size：background-size: contain;...

2020-04-19 18:31:42 13579

原创 webstorm背景颜色修改为护眼豆沙绿

1.打开idea Settings 选择 Editor——Color Scheme——General注意：如果是Mac，在webstorm界面按键：command + ,2.右边选择Text——Default text3.点击Background 设置颜色：C7EDCC------------- The End -------------许可协议: 转载请保留原文链接及作者。...

2020-04-12 17:32:04 3203 1

原创豆沙绿色值---全

豆沙绿的参数为：a. RGB颜色：(199,237,204)b. 十六位颜色代码：C7EDCCc. 色调（Hue）85、饱和度（Sat）123、亮度（Lum）205------------- The End -------------许可协议: 转载请保留原文链接及作者。...

2020-04-12 17:25:14 8087 1

原创 JS-日期转换为时间戳、new date(time).getTime()兼容IOS

详情参考：https://timor419.github.io/2020/03/28/JS-dateToTimestamp/const date = new Date('2032-01-27 5:38:13:123');const time1 = date.getTime(); //会精确到毫秒const time2 = date.valueOf(); //会精确到毫秒const time...

2020-03-28 18:37:01 2090

原创 JS-时间戳转换为日期、时分秒-如2020-02-02 20:20:20

思路分析先来说明一下我们需要实现的最终效果：将时间戳转换为我们想要的时间格式，例如：2020-02-02 20:20:20、2020-02-02…以下是一些时间格式的转换与时间的获取：var myDate = new Date(); // 获取当前时间myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,19...

2020-02-17 22:33:01 4733

原创微信小程序-一键拨打电话功能

先来说明一下我们需要实现的最终效果：用户点击之后直接跳转到拨打电话界面，并且已输入了要拨打的号码。参考详情我们看一下最终效果：微信小程序提供了很多Api，其中wx.makePhoneCall就是我们此次需要用到的。具体介绍可以查看官方介绍话不多说，我们直接上代码1.WXML<view bindtap="phoneCall" data-item='{{phone}}'>联系...

2019-08-14 11:22:03 2629

原创微信小程序-长按复制、一键复制功能

先来说明一下我们需要实现的最终效果：用户点击之后复制页面内容。参考详情一、长按复制：长按复制，在微信小程序内的文字无法长按复制，除了text节点以外，但是要在text标签内加一个“selectable”属性。话不多说，我们直接上代码1.WXML< text selectable="true" >长按复制< text/> 二、一键复制：添加点击事件，绑定...

2019-07-22 12:22:30 36812 1

weixin_43937466的博客