2019-11-18
- IE/edge自动给数字加下划线
iview 中配置meta?
input[type='file']选择文件时,前后文件名称一致时,默认文件未修改.
文件选择时,使用新的input替换旧的input
2019-11-19
- js实现回到顶部--小火箭样式
点击调用window.scroll()事件,火箭位置从下至上,网页位置scrollTop():0
$('html,body').animate({ scrollTop: '0px' }, 800);2019-11-20
- 获取当前浏览器信息
function myBroswer() {
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera;
var isEdge = userAgent.indexOf("Edge") > -1;
var isFireFox = userAgent.indexOf("FireFox") > -1;
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf("Safari") > -1;
if (isIE) {
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return "IE7"
} else if (fIEVersion == 8) {
return "IE8"
} else if (fIEVersion == 9) {
return "IE9"
} else if (fIEVersion == 10) {
return "IE10"
} else if (fIEVersion == 11) {
return "IE11"
} else {
return "0"
}
return "IE"
}
if (isOpera) {
return "Opera"
}
if (isEdge) {
return "Edge"
}
if (isFireFox) {
return "FireFox"
}
if (isSafari) {
return "Safari"
}
if (isChrome) {
return "Chrome"
}
}- js实现点击复制
<head>
<script src="./js/jquery.min.js"></script>
<script src="./js/clipboard.min.js"></script>
</head>
<body>
<div id="copyText">我是复制文本</div>
<button id="copyBtn">点我复制</button>
<input type="text" id="copyContent" style="z-index: -10;opacity: 0;position: absolute;top: -10;">
<script>
if (myBroswer() != 'Chrome') {
//非Chrome
$('#copyBtn').on('click', function () {
var text = document.getElementById('copyText').innerText;
clipboardData.setData("text", text)
//第一个参数为要复制内容的格式,第二个参数为要复制的内容
//clipboardData.clearData(sDataFormat) 删除剪贴板中指定格式的数据
//clipboardData.getData(sDataFormat) 获取剪贴板中指定格式的数据
//不支持Chrome
})
} else {
//Chrome
$('#copyBtn').on('click', function () {
var text = document.getElementById('copyText')
var content = document.getElementById('copyContent')
content.value = text.innerText
content.select(); //select()只支持input 和textarea
document.execCommand('copy')
console.log('复制成功');
})
}
</script>
</body>- vue-router 页面跳转成功,却不显示组件内容,也不报错
//new VueRouter时, routes 不小心写成 routers
//正确写法
var routerOBj = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
})2019-11-22
静默更改当前页面URL地址
- history.pushState(state,title,url)
- 该方法不会触发页面刷新，只是导致history对象发送变化，地址栏会有反应
- statue:一个与添加记录相关联的状态对象，主要用于popState事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
- title:新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
history.pushState({page: 1}, "title 1", "?page=1");- 使用该方法后，可以使用history.state属性读出状态对象
console.log(history.state) //{page:1}- 如果
pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录。 - 如果
pushState()方法设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转。
// 报错 // 当前网址为 http://example.com history.pushState(null, '', 'https://twitter.com/hello');- History.replaceState()
- 该方法用来修改 History 对象的当前记录，其余同pushState()方法一模一样
- History.popState()
- 该事件只针对同一个文档内部的切换操作，如浏览器的前进、后退按钮，或JavaScript调用的history.back()、history.forward()、history.go()方法时才会触发history.popState()事件。
- 仅仅调用pushState()和replaceState()并不会触发。
//使用的时候，可以为popstate事件指定回调函数。 window.onpopstate = function (e) { console.log('location:' + document.location) console.log('state:' + JSON.stringify(e.state)); } //或者 window.addEventListener('popstate', function (e) { console.log('location:' + document.location) console.log('state:' + JSON.stringify(e.state)); })- 回调函数的参数是一个
event事件对象，它的state属性指向pushState和replaceState方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。上面代码中的event.state，就是通过pushState和replaceState方法，为当前 URL 绑定的state对象。 - 这个
state对象也可以直接通过history对象读取。
var currentState = history.state;- 注意，页面第一次加载的时候，浏览器不会触发
popstate事件。
js获取当前URL中的参数
function getUrlParam() {
var name = window.location.search;
var obj = new Object;
if (name.indexOf('?') > -1) {
var strs = name.substr(1).split('&');
for (let i in strs) {
obj[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
}
}
return obj;
}
//调用
//getUrlParam().pageLocation 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。webpack 打包时报错 ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve '.\dist\bundle.js' in 'E:\webpack'
@ multi ./src/main.js ./dist/bundle.js main[1]原因：webpack版本过高，原安装命令不适用
原安装命令
webpack .\src\main.js .\dist\bundle.js更改为
webpack .\src\main.js -o .\dist\bundle.js
2019-11-23
require.js 引用jQuery时一直报错：Uncaught TypeError: $ is not a function
requirejs.config({ paths: { jquery: "../js/jquery-3.4.1" } }) require(['jquery'], function ($) { //jQuery版本过旧，旧版本使用live方法而不是on //jquery.js更新到新版本即可 $(document).on('click', '#btn', function () { $('#msg').html('I am coming~') }) })