javascript
web_blog
IT程序员一名
展开
-
JS 获取图片的原始尺寸
JS 获取图片的原始尺寸原创 2022-04-11 11:03:04 · 452 阅读 · 0 评论 -
用css改变input光标的3种方法
用css改变input光标的3种方法原创 2022-04-01 21:28:15 · 6239 阅读 · 0 评论 -
使用js将驼峰命名法与-命名的切换
使用js将驼峰命名法与-命名的切换原创 2022-03-30 14:45:34 · 282 阅读 · 0 评论 -
vue+Ant design vue做项目
vue+Ant design vue做项目原创 2021-11-29 19:23:24 · 226 阅读 · 0 评论 -
原生js点击图片放大
原生js点击图片放大原创 2021-11-26 15:35:23 · 862 阅读 · 0 评论 -
js实现使用drag实现元素拖拽排序
js实现使用drag实现元素拖拽排序原创 2021-11-02 10:21:28 · 321 阅读 · 0 评论 -
js实现元素拖拽
js实现元素拖拽原创 2021-11-02 10:16:40 · 300 阅读 · 0 评论 -
vue 实现点击“增加“”按钮,添加一个HTML元素
vue 实现点击“增加“”按钮,添加一个HTML元素原创 2021-11-01 17:44:04 · 1219 阅读 · 0 评论 -
原生js实现tab选项卡切换
原生js实现tab选项卡切换原创 2021-11-01 17:14:15 · 267 阅读 · 0 评论 -
报错解析 [Vue warn]: You may have an infinite update loop in a component render function.
报错解析 [Vue warn]: You may have an infinite update loop in a component render function.原创 2021-09-09 18:48:34 · 809 阅读 · 0 评论 -
JS实现数组、对象去重的几种常用方式
JS实现数组、对象去重的几种常用方式原创 2021-09-07 11:53:31 · 113 阅读 · 0 评论 -
将HTMLDOM对象转换成字符串
将HTMLDOM对象转换成字符串js实现文字播放原创 2021-09-06 15:07:00 · 626 阅读 · 0 评论 -
js 如何去除字符两端的引号
通过js 提供的substring()就可以直接去除引号。(注意是小写,和java不同)var str = JSON.stringify("sasasa");console.log(str); var str = imgPath.substring(1,str.length-1);console.log(str);原创 2021-09-01 18:26:03 · 16474 阅读 · 0 评论 -
微信公众号监听反回按钮并点击反回关闭页面代码
mounted() { pushHistory(); window.addEventListener( "popstate", function(e) { WeixinJSBridge.call("closeWindow"); }, false ); function pushHistory() { var state = { title: "title", url:原创 2020-10-10 21:46:40 · 328 阅读 · 0 评论 -
js获取当天时间0点到24点的时间戳
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-10-10 16:41:42 · 1436 阅读 · 1 评论 -
js获取当前时间(昨天、今天、明天)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-10-10 16:32:30 · 337 阅读 · 0 评论 -
js获取当前时间(昨天、今天、明天)
js获取当前时间(昨天、今天、明天) //昨天的时间 var day1 = new Date(); day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate(); console.log(day1, s1); //今天的时间 .原创 2020-10-10 16:26:19 · 1610 阅读 · 0 评论 -
repalce
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-09-07 14:07:19 · 844 阅读 · 0 评论 -
正则表达式总结
1.1. 两种模糊匹配如果正则只有精确匹配是没多大意义的,比如 /hello/,也只能匹配字符串中的 "hello" 这个子串。var regex = /hello/;console.log( regex.test("hello") ); // => true正则表达式之所以强大,是因为其能实现模糊匹配。 而模糊匹配,有两个方向上的“模糊”:横向模糊和纵向模糊。1.1.1. 横向模糊匹配横向模糊指的是,一个正则可匹配的字符串的长度不是固定的,可以是多种情况的。其实现的方式是使用量词。譬原创 2020-09-07 10:33:17 · 274 阅读 · 0 评论 -
window.print() 前端实现网页打印详解
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。最简单的打印就是直接调用window.print(),当然用 document.execCommand(‘print’) 也可以达到同样的效果。默认打印页面中body里的所有内容。<!DOCTYPE html><html lang原创 2020-08-21 15:41:10 · 2349 阅读 · 0 评论 -
解决html2canvas截取页面部分div黑屏问题
当截取页面的部分div时出现上述问题原因:当转存图片格式为jpeg时截取整个页面(document.body)没有问题,但截取部分div会有黑屏将jpeg改为png时图片可正常显示。原创 2020-08-21 14:47:11 · 2147 阅读 · 0 评论 -
script标签的同步和异步
1)、把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后,才开始展现页面内容,为避免这个问题一般把js代码全部放在<body>元素内容后面2)、script标签不带defer和async属性:同步模式,脚本获取和执行都是同步,页面会被阻塞,浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析同步模式:又称阻塞模式,会阻止浏览器的后续执行,停止后续解析,只有当前加载完成才能进行下一步操作。3)原创 2020-08-21 09:54:35 · 5452 阅读 · 0 评论 -
6s后cookie自动删除
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-08-13 15:36:51 · 519 阅读 · 0 评论 -
原生js操作cookie
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-08-13 15:35:23 · 536 阅读 · 0 评论 -
7天后自动更新cookie
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-08-13 15:32:54 · 598 阅读 · 0 评论 -
JS中兼容代码总结
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-08-12 15:55:55 · 317 阅读 · 0 评论 -
JS滚动条位置,顶部,底部,触发事件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2020-08-12 15:50:34 · 593 阅读 · 0 评论 -
JS实现滚动监听以及滑动到顶部
效果图:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> --> <meta name="viewport" content="width=device-width,原创 2020-08-12 15:35:24 · 1470 阅读 · 0 评论 -
移动端click延迟和tap事件
一、click等事件在移动端的延迟click事件在移动端和pc端均可以触发,但是在移动端有延迟现象。1、背景由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,以确保用户可以方便地放大网页内容,但是当用户单击按钮的时候,移动设备需要延迟约300ms执行,以判断用户是否是要双击2、验证<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-原创 2020-08-12 15:31:01 · 346 阅读 · 0 评论 -
移动端中使用调试控制台
一、一般移动端:在html head中引入移动端调试控制台代码并初始化:<head> <meta charset="UTF-8"> .... <!-- 移动端调试控制台 --> <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script> <script>eruda.init();</script></head>原创 2020-08-12 14:57:44 · 777 阅读 · 0 评论 -
JS阻止冒泡和取消默认事件(默认行为)
阻止事件冒泡 function stopPropagat(e) { if (e && e.stopPropagation) { e.stopPropagation();//标准浏览器 } else { window.event.cancelBubble = true;//兼容IE的方式来取消事件冒泡 } }阻止默认行为 function stopDefault(e) {原创 2020-08-11 21:49:57 · 156 阅读 · 0 评论 -
JS预编译过程
首先讲预编译过程JS代码执行过程三部曲过程语法分析:首先扫描一遍,看有没有低级的语法错误预编译解释执行:解释一行执行一行预编译low讲函数声明整体提升,变量 的声明提升(这个其实很low,点击low点)假如没有预编译的话a();function a(){ console.log("a")}先调用再声明,在没有预编译的情况下,不能正常输出,但是有了预编译就可以正常输出,这就是函数整体提升;定义一个变量 var a = "1233" 这个过程叫做变量的声明 和 赋原创 2020-08-11 14:38:35 · 206 阅读 · 0 评论 -
JS中完美兼容各大浏览器的scrolltop方法
1、各浏览器下 scrollTop的差异IE6/7/8/9/10:对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ;Safari:safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;Firefox:火狐等等相对标准些的浏览器就省心多了,直接用 docu原创 2020-08-10 14:23:45 · 528 阅读 · 0 评论 -
纯js监听滚动条到底部(vue版)
项目中,因为数据量过大,为提高页面性能,采用页面滑动 滚动条到底部的时候再进行数据请求分页,这边给大给个核心,结合vue的生命周期用纯javascript写的一个监听函数第一个我们需要知道几个属性值,判断滚动条是否已经到达底部滚动条到顶部的位置:scrollTop当前窗口内容可视区:windowHeight滚动条内容的总高度:scrollHeight//这里是触发页面滚动事件函数window.onscroll = function(){...}判断到底部的等式为: scrollTop+win原创 2020-08-10 13:24:30 · 1150 阅读 · 0 评论 -
vue中有关.env;.env.development,.env.production的相关介绍
1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件2,关于内容注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX3,关于文件的加载:根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”比如执行npm run serve命令,原创 2020-08-06 17:17:06 · 548 阅读 · 0 评论 -
vue项目使用.env文件配置全局环境变量
关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件关于文件内容:注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX.env:.env.development:关于文件的加载:根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加原创 2020-08-06 17:09:20 · 726 阅读 · 0 评论 -
document.compatMode的CSS1compat
document.compatModeBackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。var d = document, dd = d.documentElement, db = d.body, dc = d.compatMode == 'CSS1Compat', dx = dc ? dd: db;c原创 2020-08-06 11:19:58 · 520 阅读 · 0 评论 -
setInterval 和setTimeout 清空定时器,返回值,赋值为null的区别
说到定时器,很多人都不陌生,觉得这个有什么说的,很简单的了,其实你真正的理解了它了吗? 定时器的返回值是什么?clearInterval和 null有什么区别,可能有些干了几年的都不知道,下面我以setInterval为例来依次说下:1.定时器的返回值定时器是有返回值得,返回值代表着是第几个定时器,类型是number类型,也可以用来取消定时器,它是定时器的唯一标识符。 var num = 1; function fn() { var timer = setInterval(function原创 2020-08-06 10:30:07 · 1083 阅读 · 1 评论 -
解决 “数据大屏“ 展示的屏幕适配问题
现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配。一、引入flexible文件flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改html标签下font-size的值。例:下载flexible.js文件并放在common目录下,然后在vue-cli中的main.js主配置文件中引入// 适配flex,文件放在src/common目录下import "@/common/flexible.js";二、 修改文件假设我的模板是按.原创 2020-08-04 13:56:11 · 4017 阅读 · 1 评论 -
如何阻止表单的默认提交事件
表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:如果想要阻止表单的默认提交事件,有以下几种方法:1.将<input>标签内按钮类型从type="submit"修改为type="button"2.表单内的<button>未指定类型时,默认的类型为submit,可以显式的修改为<button type="button">来阻止表单提交3.利用原创 2020-07-08 15:46:33 · 513 阅读 · 0 评论