- 博客(62)
- 收藏
- 关注
RSS订阅原创 iframe嵌入网页时，页面大小怎么自适应
问题描述：页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果：可以看到嵌入的页面只露出了一部分。而我们希望：嵌入的页面能够完全展示在容器中。思路：利用CSS的 transform，进行页面缩放。1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
2022-02-24 11:39:02
31746
6
原创 初识Blob对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成
2021-12-24 15:34:17
410
原创 JavaScript实现图片下载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片
2021-12-24 15:13:11
2712
1
原创 JavaScript实现图片上传到页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=
2021-12-23 14:14:03
1769
原创 JavaScript实现图片延时加载/图片懒加载/图片滚动加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片
2021-12-22 17:16:22
311
原创 JS +JQuery实现时间轴卡尺
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间
2021-12-21 15:48:07
774
原创 JS+JQuery实现switch组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sw
2021-12-21 14:48:57
917
原创 修改原生input checkbox样式、radio样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生
2021-12-21 14:16:30
890
原创 几种常用的文字效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字
2021-12-21 10:53:28
238
原创 简单实现图片预览功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单
2021-11-22 14:47:52
998
7
原创 大屏动效之数字动态增加
使用插件： CountUp.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-09-22 17:29:32
596
原创 大屏动效之文字滚动
1、文字竖直方向-向上滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-09-22 16:30:24
1192
原创 [已解决]TypeError: Can not set property ‘xxx‘ of undefined报错情况分析
之前我写过一篇 [已解决]TypeError: Cannot read property ‘xxx‘ of undefined报错情况分析那篇报错说的是Cannot read ——“不能读取未定义的数据”这个报错是Cannot set ——“不能设置未定义的数据”，也就是说你不能给未定义的数据赋值。可以看到：如果一个变量a没有在data中定义，你这样去给它赋值： this.a = 'hello,world'，是没有问题的。类似于一个变量未经声明就赋值，都可以看做是在window对象上寻找这个变量
2021-05-26 10:25:46
65411
9
原创 [更新中]一些常用的JS手写功能
1、对象深拷贝function deepClone(obj) { const _toString = Object.prototype.toString // null, undefined, non-object, function if (!obj || typeof obj !== 'object') { return obj } // DOM Node if (obj.nodeType && 'cloneNode' in obj) { r
2021-01-14 10:54:38
225
原创 [已解决]SourceTree重新输入Git密码、拉取代码验证失败
一、如果在网页端改了git账户的密码，SourceTree无法拉取代码。1、打开当前目录2、删除 passwd文件3、打开sourceTree，点击拉取，会弹出弹窗让你输入账户密码。二、有时候密码没有改，但是SourceTree拉取代码时，会提示Authentication failed for http xxx。1、打开SourceTree2、找到 菜单栏的 工具——> 选项，打开弹窗。3、打开账户选项卡，删除当前的账号密码。...
2021-01-14 08:47:25
3281
1
原创 Array.sort(function(a,b){return a-b})对数组进行排序
我就一直不明白，为啥 return a-b 是升序， return b-a 就是降序？看了好几个讲原理的太复杂了也没看明白，但是！我掌握了一种特殊的技巧去记忆！a-b别读a减b，读a至b，在字母表中，a至b是递增的，所以 return a-b 是升序。反之，return b-a 就是降序。...
2020-12-10 16:03:18
2158
6
原创 使用canvas绘制登录验证码
<template> <div class="code-canvas"> <canvas id="code-canvas" @click="createCode()" :width="canvasWidth" :height="canvasHeight" ></canvas> </div></template><style scoped>.code
2020-12-07 15:13:37
469
原创 细致讲解slot插槽的使用
彻底搞懂slot插槽，图文详解1、什么是插槽Vue 实现了一套内容分发的 API，将 `` 元素作为承载分发内容的出口。插槽实质是对子组件的扩展，通过``插槽向组件内部指定位置传递内容。slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。2、slot 与 props 的区别3、插槽的使用（1）匿名插槽（单个插槽、默认插槽）（2）具名插槽（3）作用域插槽因为父级模板里的所有内容都是在父级作用域中编译的；子级模板里的所有内容
2020-11-19 15:39:48
30413
7
原创 JS一键分享功能
<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1524625953372" style="position: absolute;left: 200px;"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" cl
2020-11-17 10:02:07
951
原创 JavaScript的slice、substring、substr 快速区分
基本用法1、slicearrayObject.slice(start,end)start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。2、substringstringObject.su
2020-11-14 11:03:13
410
原创 [已解决]nvm安装node成功，安装npm失败npm不是内部或者外部的命令 + nvm安装步骤详解
nvm下载安装1、可以去github上下载最新版本 点击下载2、上面的页面打不开或者下载太慢，可以用我的百度网盘链接下。链接：https://pan.baidu.com/s/14PX1xUQuk74nEd3bvR9twg提取码：libunvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置nvm-setup.zip（推荐）：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。Source code(zip)：zip压缩的源码Sourc code(tar.gz
2020-11-10 19:29:00
11549
10
原创 [已解决]“TypeError: Cannot read property ‘xxx‘ of undefined“报错情况分析
1、如果是vue，先看看你的data写对了没，我有一次手误打成了 date ，检查了一下午才看出来o(╥﹏╥)o2、如果这个数据“xxx”是从后台异步获取的，那就最好在data中先给他个默认值比如，data() { return { obj1: '', obj2: null. obj3: {}, obj4: [] }}mounted(){ // 获取后台数据给obj们赋值等等各种异步操作}或者 当“xxx”是一个嵌套两层的
2020-11-09 20:01:21
185925
69
原创 弹性盒子的旧语法浏览器兼容处理
弹性盒子前言容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项目的属性orderflex-growflex-shrinkflex-basisflexalign-self前言Flex是Flexible Box的缩写，意为”弹性布局”。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项
2020-10-31 15:39:58
1006
原创 CSS:background属性使用总结
1、background-color: 规定背景颜色。2、background-image: 规定背景图片。 background-image:url("Images/mytest.jpg");里面的图片路径是相对于代码所在样式表相对路径。路径也可以不加双引号: background-image:url(Images/mytest.jpg);3、background-repeat: 规定背景图片是否可以重复。background-repeat: repeat; /* 默...
2020-10-27 14:14:18
680
1
原创 使用webpack-replace-loader插件进行版本控制
1、webpack-replace-loader一个 webpack 打包时用来替换字符串的 webpack-loader 。2、常规使用（下载、安装、配置）githab-中文文档3、使用场景1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。2 . 项目统一查找调整页面配色样式 color , 将 #00ff00 替换为 #ff0700 。3 . 大型项目中，依照打包策略在相关文件中写入不同内容。以上说白了就是 用webpack-re
2020-10-10 09:34:30
1398
原创 getSelection()获取光标位置，获取输入框的焦点
获取输入框中光标的位置getPosition(element) { //获得光标 var caretOffset = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { //谷歌、火狐 sel = win.getSel
2020-09-17 14:36:22
6042
原创 按回车发送消息、Alt+Enter换行实现
if (event.altKey && event.keyCode == 13) { //Alt+Enter换行 let sendMeg = $("#msgbox").html() + "\n\n"; $("#msgbox").html(sendMeg) let el = document.getElementById('msgbox'); var range = document.createRange(); range.selectNodeContents(
2020-09-16 16:55:09
1292
原创 阻止浏览器的默认行为和阻止事件冒泡
阻止浏览器的默认行为if (event && event.preventDefault) {//如果提供了事件对象，则这是一个非IE浏览器 event.preventDefault();//阻止默认浏览器动作(W3C) } else { //IE中阻止浏览器行为 window.event.returnValue = false; return false;}阻止事件冒泡function stopPropagat(e) { if (e &&am
2020-09-16 16:44:42
298
原创 国际化vue-i18n向语言包中传入参数
模板中<span>{{$t('el.table.total', { pagetotal: 123 })}}</span>js代码中this.$t('el.table.number', { "Number": index + 1 });语言包中table: { total: '共 {pagetotal} 条', number: "第 {Number} 行",}文档写的更详细 vue-i18n格式化...
2020-08-25 09:58:13
6364
原创 用vue实现一个搜索框组件
一、需求描述实现一个搜索框，输入关键字，按键抬起后可以实现查询功能，下拉列表展示搜索结果，搜索结果中关键字要用特殊颜色突出显示，默认选中搜索结果的第一项。可以按上下键切换选中项，按回车输出选中项。单击组件之外的地方可以收起下拉列表。二、代码实现<template> <div class="search-wrapper" @click.stop> <div class="search-input" :class="{'is-focus':isFocus}">
2020-08-24 09:09:30
15791
4
原创 JS实现页面中拖动元素，并解决页面中含有iframe时卡顿问题。
需求描述页面中有一个聊天窗口（包括标题栏和内容区）。实现一个功能：点击并拖动该聊天窗口的标题栏，可以把该窗口移动到页面的任意位置。要求1、鼠标点击标题栏的位置距离浏览器窗口边缘的距离，上下不能小于50px，左右不能小于100px。2、将聊天窗口应用于复杂页面时（含有iframe等），拖动流畅不卡顿。功能实现<template> <div id="chat-mask"> <div :id="id1" class="chat-container">
2020-07-31 17:43:50
2047
原创 Vue项目国际化引入高版本的vue-i18n时与ElementUI组件国际化的兼容问题[已解决]
问题描述：现在有一个大型的vue(“vue”: “^2.5.16”,)项目，引入了高版本的"vue-i18n": "^8.18.2"插件来实现国际化，同时项目中也用到了十几个ElementUI中的组件，现在，ElementUI中的组件国际化不兼容高版本的vue-i18n插件。需求：整个项目都要实现国际化。实际上要做什么操作：项目用到的ElementUI组件国际化语言文件，项目中自己开发的组件也写了国际化语言文件，要做的事就是把这两个资源文件合在一起！解决方案：情况一项目中按需引入了一
2020-07-10 11:50:42
2407
2
原创 正则表达式匹配中英文姓名
匹配2-4个汉字的中文名/^[\u4E00-\u9FA5]{2,4}$/ let name1 = '张'; let name2 = '张三'; let name3 = '李四一'; let name4 = '东方不败'; let name5 = '东方不败一'; console.log(/^[\u4E00-\u9FA5]{2,4}$/.test(name1)) console.log(/^[\u4E00-\u9FA5]{2,4}$/.test(name2)) console.log(/^
2020-07-07 16:31:04
5614
1
原创 用递归解析一个嵌套多层的数组
有如下一个数组：let menuBean = [ ['images/1.png','页面1','router1','index1'], ['images/2.png','页面2',null,'index2', ['images/2.png','页面2-1','router2','index3'], ['images/2.png','页面2-2','router3','index4']], ['images/3.png','页面3',null,'inde
2020-07-06 09:07:54
1462
2
原创 [解决]Converting circular structure to JSON
今天写一个递归时遇到了一个问题，类似于要把下面的这个数据：let arr = [ { name:'a1', childs:[ {name:'b1',child:null}, {name:'c1',child:null}, ] }, { name:'a2', childs:[ {name:'b2',child:null},
2020-07-04 16:08:41
39656
原创 vue-i18n国际化插件实现语言切换
需求：在一个vue的单页面项目中实现中英文语言切换。1、安装vue-i18n插件npm install vue-i18n --save安装成功后在package.json文件中查看：2、代码实现在main.js中import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false//1、引入插件 （前提是要先引入 vue）import Vu
2020-07-01 13:58:29
955
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人