javascript
王永存
大道至简
展开
-
Mixed Content: The page at ‘xxx‘ was loaded over HTTPS, but requested an insecure resource ‘xxx‘.
HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的。Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'. This request has been blocked; the content must be served over HTTPS.转载 2022-05-30 16:48:19 · 560 阅读 · 0 评论 -
ES2020新特性js运算符解释说明
js运算符 ?. 、?? 、??= 解释说明?. 可选链运算符,检查每个级别,如果碰到的是 undefined 或 null 属性,直接返回 undefined,不会继续往下检查?? 空值合并运算符,仅在 左侧 是 nullish (null 或 undefined) 时,使用右侧的值??= 逻辑空赋值运算符 (x ??= y) 仅在 x 是 nullish (null 或 undefined) 时对其赋值...原创 2022-02-24 15:00:22 · 807 阅读 · 0 评论 -
【无标题】JS CustomEvent自定义事件传参
JS CustomEvent自定义事件传参 - 超哥20 - 博客园首先,看了鑫大佬的文章后,百度了文章内容的两个方法: 1、CustomEvent事件是有程序创建的,可以有任意自定义功能的事件 2、dispatchEvent()方法给节点分派一个合成事件 这两个方法https://www.cnblogs.com/chao202426/p/13632327.html...原创 2022-01-07 15:39:33 · 483 阅读 · 0 评论 -
input type=password 取消密码提示框
浏览器记住密码后,在写页面时,设置了input的type='input'时,会带出密码提示框让你回填(如下图所示),怎么才能取消它呢?百度了很多的办法,1、说加一个隐藏的input框(最佳办法)2、加属性 autocomplete=“new-password” 3、通过失去焦点,获取焦点来控制在谷歌浏览器的试的,没有一个能行的。没有办法,还是靠自己实现吧。大致思路是这样的,利用input的 readonly结合失焦/焦点/点击等事件进行处理,具体代码如下:<input ty...原创 2021-08-01 22:52:01 · 4514 阅读 · 5 评论 -
事件流、事件冒泡、事件捕捉、事件委托
事件流当我们触发一个dom事件(e.g: click),都会进行一次事件对象传播的过程,传播节点包括事件源和它上面的所有祖先节点,用于告知这些节点一次事件的发生。发送事件对象之前,需要先确定此次的传播路径,这是一个有序的dom节点的列表,列表最后一个节点是事件源,列表的前面都是事件源的祖先节点。确定路径后,一次传播会经过三个阶段:捕获阶段、目标阶段、冒泡阶段。如果某个节点不支持某个阶段,或者传播已结束都不会触发相应的事件监听函数。可参考下面的图片:捕获阶段:事件对象从window传播到事原创 2021-01-07 11:56:25 · 190 阅读 · 0 评论 -
js自动下载代码
function funDownload(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成blob地址 ...转载 2018-07-12 10:01:14 · 2436 阅读 · 1 评论 -
fomdata上传文件
html代码:<input type="file" id="fileUpload">js:var fileUpload = document.getElementById('fileUpload'); var formData = new FormData(); fileUpload.onchange = function () { if(fileUpl...原创 2018-07-07 10:35:26 · 988 阅读 · 0 评论 -
js判断手机系统是android还是ios
<script type="text/javascript">var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Ma...转载 2018-10-11 11:41:04 · 1454 阅读 · 0 评论 -
iframe高度自适应
function calcPageHeight(doc) { var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.sc...原创 2018-10-11 11:42:05 · 1300 阅读 · 0 评论 -
js 实现YYYY-MM-DD日期加上天数得到新的日期
使用js实现某个日期(YYYY-MM-DD),添加某个天数后,得到新的日期(YYYY-MM-DD)使用js实现某个日期,添加某个天数后,得到新的日期这种需求在web开发中,非常普遍,可以参考如下://日期加上天数得到新的日期//dateTemp 需要参加计算的日期,days要添加的天数,返回新的日期,日期格式:YYYY-MM-DDfunction getNewDay(dateTe...转载 2018-11-08 17:31:12 · 6548 阅读 · 3 评论 -
js根据数组中对象的某个属性值进行去重
var arr = [ { from:'张三', to: '河南' }, { from:'王二', to: '阿里' }, { from:'王二', to: '杭州' }, { from:'王二', to: '山东' },]有如上数组,想根据数组中的对象的from属性进行去重,如果from一样的话,只去...原创 2019-01-19 13:06:51 · 12194 阅读 · 0 评论 -
call() 、 apply() 、bind()方法的作用和区别!
从一开始,我是在书上看到关于bind()、call() 和 apply(), 不过长久以来,在工作中与网上接触到了很多关于这三个方法的使用场景,对这三个方法也算是比较熟悉了。所以把他们的作用和区别简单阐述一下!javaScript权威指南上的解释是: call() 、apply()可以看作是某个对象的方法,通过调用方法的形式来间接调用函数。bind() 就是将某个函数绑定到某个对象上。...转载 2019-04-26 09:47:47 · 334 阅读 · 0 评论 -
对象继承--取并集,优先使用自身配置
function extend(o, n, override) { for (var p in n) { if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override)) o[p] = n[p]; }}// 默认参数var options = { page...原创 2019-04-28 09:27:46 · 233 阅读 · 0 评论 -
javascript中浏览器控制台console.log 输出图片,彩色字体,文字
代码:if (window.console) { var cons = console; if (cons) { cons.log("%c\n ", "font-size:41px;background:url('http://cdn.iknow.bdimg.com/static/common/pkg/module_zed9cd9fd.png') ...转载 2019-04-29 10:22:30 · 3854 阅读 · 0 评论 -
js把base64转为可下载文件
1、html代码放一个a标签<a href=""></a>2、js代码 var downLoad = document.querySelectorAll('#down a')[0]; var downLoad = document.querySelectorAll('#down a')[0]; var blob = getBlob(base64Tex...原创 2018-07-12 09:48:54 · 19063 阅读 · 0 评论 -
js上下文字无缝滚动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo" style=&qu原创 2018-07-11 16:05:47 · 1608 阅读 · 0 评论 -
scrollTop
javascript scrollTop 获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的“返回顶部”按钮)。在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.转载 2017-09-16 15:28:23 · 461 阅读 · 0 评论 -
Javascript中call和apply的区别与详解
转自:http://www.7old.com/jiaocheng/show-1412.html在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别,下面我来给大家介绍一下call和apply用法。在web前端开发过程中,我们经常需要改变this指向,通常我们想到的就是用call方法,但是对于call的理解很多人不是很清晰,那么下面小编转载 2017-10-01 19:58:30 · 217 阅读 · 0 评论 -
html页面内容的收缩和展开效果
html页面内容的收缩和展开效果常见的网页中,会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果,新闻的内容只显示少数的一部分,然后后面会跟一个展开的链接,点击这个链接才会显示全部的新闻内容。1、收缩情况下显示内容效果2、点开之后显示的内容效果3、实现的代码如下:<!DOCTYPE html><html lang="e...原创 2020-02-08 12:16:46 · 34732 阅读 · 9 评论 -
__proto__和prototype
作者:doris链接:https://www.zhihu.com/question/34183746/answer/58155878来源:知乎1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构转载 2017-10-22 21:00:43 · 409 阅读 · 0 评论 -
点击导航,滑动到网页中的指定位置(JS实现滑动锚点定位)
在一个网页页面中,可能会分为很多的模块内容,当我点击导航栏的某一项时,希望显示对应的内容,例如,点击下图导航中的报告服务后,希望网页滑动到 “报告服务” 的模块,点击城市品牌滑动到“城市品牌”的模块。城市品牌模块js代码 $(function () { //获取城市模块到顶部的距离 var city_top = $('#ci原创 2018-01-10 17:27:53 · 20378 阅读 · 1 评论 -
获取url地址中查询字符串的某一个
例如 url: www.baidu.com?id=123&member=789想要获取该url里的id的值,方法如下:function getSearchString(key) { // 获取URL中?之后的字符 var str = location.search; str = str.substring(1,str.length);原创 2018-01-05 12:47:10 · 2711 阅读 · 0 评论 -
点击返回顶部(滑动效果)
点击返回顶部手机端和PC端很多需求需要做点击返回顶部,例如下图:当网页被卷上去的高度大于绿色方框的高度时,显示点击返回顶部的按钮,点击之后,返回当顶部。 代码:1、html代码(自己找一张点击返回顶部的图片) 2、CSS代码(用固定定位,其他样式根据要求自己调整) .back_top{ position:原创 2018-01-10 16:33:29 · 9572 阅读 · 0 评论 -
数组去重方法
数组去重方法1、ES6提供了新的数据结构Set,它类似于数组,但是成员的值是唯一的,没有重复的值。 let arr = [1,2,5,2,3,4,1,2,3,5,4,1,2,3,2,1,1,1,'asd','123','123','123','asd',1,true,true,false]; console.log(...new Set(arr)); 或者 let arr原创 2018-01-19 11:06:24 · 560 阅读 · 0 评论 -
左右滑动导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .warp{width:100%; max-widt原创 2018-03-08 17:57:52 · 4230 阅读 · 0 评论 -
js截取英文文本(按英语完整单词),超出部分显示"...”
//英文标题按单词截取(参数说明 text:要截取的英文 len:要截取的长度) function sliceEnglish(text,len) { //如果要截取文本的长度小于或者等于要截取的长度,则不进行截取,直接返回文本 if(text.length < len) { return text; } ...原创 2018-03-06 15:45:22 · 2799 阅读 · 0 评论 -
Jquery 获取表单FORM所有元素进行AJAX提交
1、html<form id="test"> <input name="a" value="1"> <input name="b" value="2"> </form 2、ajax var params = $("#test").serialize原创 2018-03-29 10:08:23 · 2586 阅读 · 0 评论 -
js异步处理
Javascript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列,等到所有其他代码执行后才进行,而不会阻塞线程。但是前端在写交互的时候,可能需要对数据进行同步的操作var data;$.ajax({ url: "some/url/1", success: function( data ) { // 放在jquery指定的success函数里面可以保...原创 2018-05-16 15:45:57 · 733 阅读 · 0 评论 -
cookie的常用封装方法
/*** addCookie 添加一个cookie** params ** name [String]** value [String]** iDay [Number]*/function addCookie(name,value,iDay){ if(iDay){ //设置过期时间 var oDate = new Date(); oDat...原创 2018-05-24 15:17:39 · 1775 阅读 · 0 评论 -
javascript中三大弹出框alert(),confirm(), prompt() 的应用和区别
alert(),confirm(), prompt()的使用和区别1.警告消息框alert通过alert 方法有,可以将希望的文本字符串以弹出框的形式展示给用户。该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用户必须先关闭该消息框然后才能继续进行操作。例如:在javascript中写了: window.alert("请确认周围环境安全");原创 2017-08-18 14:34:29 · 11936 阅读 · 0 评论