JavaScript
1091214370的博客
以前很狂,现在很菜!
展开
-
JavaScript对象学习笔记(一)
javascript从入门到精通学习笔记原创 2016-10-23 20:02:17 · 319 阅读 · 1 评论 -
js根据手机屏幕宽度自动设置字体大小
(function(doc,win){ var docEl = doc.documentElement, //文档根标签 resizeEvent = 'orientationchange' in window ? 'orientationchang' :'resize'; //viewport变化事件源 var rescale = function(){原创 2017-07-18 16:03:30 · 3463 阅读 · 0 评论 -
支持任意张图片轮播的逻辑函数
本例是在页面纵向展示两个图片,每次向上或向下滑动一张图片。 头部第一张图片向上滑,则直接滑到底部,同理,最后一张图片下滑,直接滑向顶部。//因为只贴逻辑部分,所以解释一下变量// flag定义一个全局变量,用来保存当前位置,这里作为一个参数传给函数。//max 获取到的图片总个数,因为本例是展示两个图片,所有flag最大为max-2//_index 获取到的当前点击按钮(一共有两个按钮,一个向上翻原创 2017-07-21 22:10:52 · 654 阅读 · 0 评论 -
jq获取同一类名的但处于不同父元素下的当前元素的索引值
今天遇到了一个小坑,关于jQuery的 index()的,分享一下。 先看一下菜鸟教程的定义:获得被点击的li元素相对于它的同级元素的 index:$("li").click(function(){ alert($(this).index());});也就是说,如果两个父类元素下面都有一个li标签。分别点击两个li标签,弹出的index都是0。<ul class='1'> <li原创 2017-07-22 15:24:56 · 2128 阅读 · 0 评论 -
商品详情放大效果
//页面布局:<div class="box"> <div class="disImg"> <img src="images/datu.png"/> <img src="images/datu.png" style="display: none;" />原创 2017-07-23 09:33:40 · 509 阅读 · 0 评论 -
头像上传剪裁预览功能js实现,以及Safari中一个坑。
先贴张图片,看看效果贴代码之前,将一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title> 上传头像 </title> <link href="css/re-boot.css" rel=原创 2017-08-17 17:25:36 · 2189 阅读 · 0 评论 -
关于闭包的简单应用实例--getter && setter以及迭代器
在之前的文章中总结过闭包,也是咋结合了几本书的解释加上自己的理解,总结了关于闭包的一些知识点。 这两天在读《JavaScript面向对象编程指南》时,再次接触了闭包,这次接触,更加加深了我对闭包的理解,我认为对闭包最简单的理解就是:能够在函数外部访问函数内部变量,将内部变量提升为“全局变量”(这里是指能够在全局作用域内访问),这改变了原有的作用域链的限制。今天的第一个简单的应用实例:getter和原创 2017-11-03 22:08:45 · 309 阅读 · 0 评论 -
JavaScript数组去重
/** * 数组去重方法思路 *方法 1:新建一个数组,将原数组第一个元素放入, *然后从原数组第二个元素开始与新数组内元素比较,相同则放弃,不同则加入新数组 */Array.prototype.unique1 = function() { var aRes = [this[0]]; var flag = false; for (var i = 1; i < thi原创 2017-12-22 15:53:39 · 129 阅读 · 0 评论 -
JS数组API知识点总结
/** * 数组API知识点总结 */var arr = [1, 2, 5, 4, 3, 6, 7, 8, 4];/** * 数字转字符串 * 两种方法:String()和join(); * join参数为用于分隔的标识,若为空,则与String相同 */console.log(String(arr)); //1, 2, 5, 4, 3, 6, 7, 8, 4;console.log(原创 2017-12-22 22:52:26 · 245 阅读 · 0 评论 -
JS內建对象Math
Math是一个包含一系列方法和属性、用于数学计算的全局內建对象。/** * 随机数 Math.random(); * random()返回的0到1之间的某个数[0,1);如果要获得0-100之间的某个数100*Math.random() * 要获取min-max之间的数,使用公式:((max-min)*Math.random())+min来获取。 * */console.log(Math原创 2017-12-23 14:41:23 · 165 阅读 · 0 评论 -
JavaScript对几个排序算法的实现
冒泡排序、选择排序、插入排序、快速排序、归并排序和堆排序的代码实现var arr=[2,1,3,6,5,7,4,9,8];冒泡排序/** * 冒泡排序: * 每次都要从头开始比,两两相比。 */function bubble(arr) { var temp; var len = arr.length; for (var i = 0; i < len; i++) {原创 2017-12-22 14:33:59 · 156 阅读 · 0 评论 -
如何实现一个数与多个数比较
问题在现: 我需要根据后台传来的数据判断数据展示,下图中红色是后台数据对应的单选框,其他表示其他数值。值使用react 的state保存,所以当数值为前五个其中之一时,用户选择自定义出现的输入框内值也为改数值,用户需要先删掉,在从新填写。 需求: 当数据为前五个其中之一时,点选自定义,输入框内为空。解决思路和方案:思路: 判定数据是否为其中之一,若是则输入框为空。使用数组保存...原创 2018-02-11 15:55:16 · 1300 阅读 · 0 评论 -
js输出蛇形矩阵
来自choice boh/** * 蛇形矩阵 * 思路整理:首先定义一个二维数组用来保存矩阵内容,蛇形矩阵的特点是数字顺时针回旋依次增加1, * 可以通过二维数组坐标控制输出内容。 * 传入值必须为正整数!!! * 循环定义:以3X3数组为例,一次循环为[0][0]==>[0][2]==>[2][2]=>[2][0]=>[1][0] * ...原创 2018-04-14 13:20:04 · 1925 阅读 · 0 评论 -
使用antd开发可动态增加项的表单
我不知道应该怎么描述这个功能才算清晰,看图吧 环境是在antd的Form组件内开发大概的功能如下:用户需要选择异常情况通知方式,并填写最少一个最多三个的联系人姓名和联系方式。期望用户点击加号,可以增加一条,最多三条。内容需校验,输入不能为空,联系方式需要根据用户勾选的通知方式校验输入内容,即用户勾选短信时,联系方式校验规则为手机号,勾选邮件时,校验方式为邮箱。输入部分的数据结构应...原创 2018-08-14 16:55:23 · 31377 阅读 · 36 评论 -
使用dva routerRedux.push跳转页面携带参数时请求两次问题
发现问题页面使用routerRedux.push([path])进行跳转,部分页面跨页传参也是使用这种方式,然后发现了一个很奇怪的现象,部分页面接受参数后,执行两次subscriptions,所以导致两次请求。在dva的issues里面看到了2016年有人提过这个问题,并被列为bug解决了。很奇怪在这为什么复现了。寻找原因想知道从页面加载到请求结束到底发生了什么,这就要借助工具了----Re...原创 2018-11-08 19:53:47 · 8772 阅读 · 0 评论 -
fetch下载文件--统一拦截导出文件
做外卖报表导出功能,前端使用fetch请求,后端在正常情况向会返回csv文件,在异常时会返回对应的异常码;前端的请求都是使用request.js做了统一拦截和错误提示,但是不支持文件下载,于是对原有内容稍作改造,支持文件下载。前端是怎么实现文件下载的?// 使用fetch发送请求并拿到返回值 const response = await fetch(newUrl, responseBody)...原创 2018-11-08 20:25:14 · 6537 阅读 · 2 评论 -
使用JS监听鼠标滚轮事件,并且滑动一次只执行一次事件方法
使用JS监听鼠标滚轮事件,并且滑动一次只执行一次事件方法function autoRoll() { $(document).on("mousewheel DOMMouseScroll", function(e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta >原创 2017-07-18 13:55:12 · 7856 阅读 · 0 评论 -
ajax知识总结
1. 使用XMLHttpRequest获取数据:open()和send()open(method,url,anync) method:get/post.url:接受数据的地址anync:提交方式,true表示异步/false表示同步send(string) 如果提交方式是get,string=null如果提交方式是post,string=需要发送的信息//补充//设置HTTP头信息原创 2017-06-02 22:56:47 · 336 阅读 · 1 评论 -
JavaScript初探知识总结
JavaScript初探知识总结一如既往的总结一下所了解到的新知识。 主要有四点:1:使用对象字面量、使用对象。2:相等和等同。3:数组问题。4:处理错误。5:undefined和null。使用对象字面量 JavaScript支持对象的概念,通过调用new Object()的方式创建对象。用对象字面量的方式可以一口气定义一个对象及其属性。代码如下:<script type="text/jav原创 2016-11-20 11:28:40 · 255 阅读 · 0 评论 -
假期里入门JS的一些感受(一个小坑)
假期里JS入门小结无聊的假期结束了,浑浑噩噩的度过了寒假。假期里学习了一丢丢JS ,也遇到了一些坑,总结一下。1、let 和 var 背景描述: 我定义了三个li,想利用for循环来完成每个li标签对应的鼠标事件。 理想结果:当鼠标移动到某一个li时,执行当前li标签的鼠标事件函数。var oLi=document.getElementsByTagName('li');原创 2017-02-18 23:41:59 · 269 阅读 · 0 评论 -
图片轮播--基于JS数组实现
之前发布过一款js图片轮播,是利用js调整margin来实现的轮播,代码、思路、逻辑比较复杂,今天介绍一款相当简单的图片轮播–基于JS数组实现。 设计思路: 定义一个数组mypic,用于存放三张图片地址,mypic[0]是第一张图片的地址,mypic[1]是第二张图片的地址,mypic[2]是第三张图片的地址。利用JS获取到的节点改变其src=mypic[i],做到图片变换。js代码:windo原创 2017-02-28 22:26:11 · 3750 阅读 · 1 评论 -
JS制作简单图片轮播--通过调整margin制作
图片轮播在网页中使用的非常广泛,制作的方法有很多,介绍一下我用调整margin来实现3张图片轮播功能。设计思路:自动跳转。三张图片每隔3秒跳转一张,第三张图片跳转完成后,3秒后跳转至第一张图片。鼠标控制。通过鼠标点击跳转按钮完成跳转。向左向右跳转,同上第3张后是第一张,相反方向时,第一张后是第三张。注意实项。鼠标点击跳转时,自动跳转停止。效果图如下:由于录屏软件原因导致效果不是很好。见谅开发原创 2017-02-25 23:08:16 · 1623 阅读 · 0 评论 -
借百度前端学院JS任务二总结JS数组(一)
任务二的内容是这样的: **任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上。**<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title原创 2017-03-18 23:09:21 · 722 阅读 · 0 评论 -
string.replace()替换匹配给定的正则表达式的(一个或多个)子串
在百度前端学习js遇到的问题,总结一下: 概要:string.relace(regexp,replacement)参数 regexp:指定要替换的模式RegExp对象。如果这个参数是一个字符串,他将用作一个搜索的直接量文本模式,他将不会先转化为RegExp对象。 replacement:用来替换的字符串,或者一个函数,用于在调用时生成被替换的文本。 返回 一个新的字符串,其中匹配RegEx原创 2017-03-27 21:25:38 · 7166 阅读 · 0 评论 -
JS正则表达式学习总结
正则表达式是描述字符模式的对象。正则表达式直接量定义为包含在一对斜杠(/)之间的字符。例:/s$/ –匹配所有以s结尾的字符串。 正则表达式中的所有字母和数字都是按照字面含义进行匹配的。JS正则表达式语法也支持非字母的字符匹配。这些字符需要通过反斜线(\)作为前缀进行转义。 比如,\n用来匹配换行符。 正则表达式中的直接量字符 字符 匹配 字母和数字字符 自身 \o原创 2017-03-15 18:29:14 · 2082 阅读 · 2 评论 -
jQuery插件开发
jQuery开发插件很简单。 jquery.fn是jQuery对象的原型对象,如果给该对象添加一个 函数,该函数会成为一个jQuery的方法。 例子如下:jQuery.fn.println=function(){//将所有参数合并为空格分割的字符串 var msg=Array.prototype.join.call(arguments,""); this原创 2017-04-09 15:42:15 · 556 阅读 · 0 评论 -
addEventListener() 和 attachEvent()
addEventListener():在除IE8及之前的版本外所有的浏览器都支持标准的事件模型中,任何能成为事件目标的对象—这些对象包括Window对象、docum对象和所有的文档元素—都定义了一个名叫addEventListener()的方法,使用这个方法可以为事件目标注册事件处理程序。 addEventListener()接受三个参数。第一个是要注册处理程序的事件类型这个事件类型(或名称)是个原创 2017-04-05 22:06:20 · 422 阅读 · 0 评论 -
JavaScript精粹---使用数字
1、JavaScript的內建对象–Math 2、格式化货币值 处理货币值时,需要做很多事,例如增加必要的小数点,在末尾增加必要的0。3、将数字转换为序数 英文的序数存在一定的规则。原创 2017-05-11 21:14:09 · 213 阅读 · 0 评论 -
js返回css样式的color值
今天做百度前端学院的任务时,遇到了一个问题:耀耀学院任务二: 任务描述 共5行表单 要求: 表单获得焦点时,下方显示表单填写规则 表单失去焦点时校验表单内容 校验结果正确时,表单边框显示绿色,并在下方显示验证通过的描述文字 校验结果错误时,表单边框显示红色,并在下方显示验证错误的描述文字 点击提交按钮时,对页面中所有输入进行校验,校验结果显示方式同上。若所有表单校验通过,弹窗原创 2017-04-23 20:57:40 · 1396 阅读 · 0 评论 -
js引用<select>下拉列表选定的内容
需求:使用js获取select下拉列表里的内容,并显示在制定位置。默认显示第一个option内容。当下来列表选中的内容变化时,展示内容随之变化。<select id="mySelect"> <option>上传网站案例</option> <option>上传插件案例</option> <option>上传博客</option></select>您目前选择的是<st原创 2017-05-14 17:44:36 · 440 阅读 · 0 评论 -
JavaScript的闭包问题
什么是闭包? 《JavaScript权威指南》:函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性叫闭包。从技术的角度讲,JavaScript中所有函数都是闭包:他们都是对象,他们都关联到作用域链。《JavaScript精粹》:内嵌函数可以在任何情况下访问其外围环境中的变量的这种能力。我的理解:基于《JavaScript精粹》的定义,加以解释。内嵌函数,可原创 2017-05-18 11:13:14 · 348 阅读 · 0 评论 -
页面滚动到特定位置
有两种方法用于页面滚动,或者使用滚动的相对坐标(window.scrollBy)来定位,或者是通过滚动到某一点的绝对坐标(window.scrollTo)来实现.。原创 2017-05-20 13:10:18 · 3206 阅读 · 0 评论 -
图片预装载
JavaScript中有一个内嵌的Image类,该类可以进行图片的预装载。当建立一个Image对象时,并且将想要预装载的图片的URL传递给该对象的src之后,浏览器就会执行预装载请求,将想要加载的图片保存到cache,以后如果想要使用这个图片就会直接从cache中取出并立即显示,而不是重新进行装载。//对图片进行预装载的基本代码var img=new Image();img.src="image原创 2017-05-20 13:41:50 · 207 阅读 · 0 评论 -
使用js将blob对象转file对象
在做图片裁剪上传的需求时,后端使用统一的文件上传接口,要求前端做图片裁剪。前端裁剪上传图片组件开发会单独一篇文章总结,写完后会在此处链接过去。前端裁剪图片后获取的实际是blob对象,后端统一的文件上传接口实际接收的file对象,前端需要在数据提交前将blob对象转为file对象。转换方法如下:使用file()构造函数。const files = new window.File( [...原创 2019-03-08 16:21:50 · 46481 阅读 · 2 评论