JavaScript
Amy o-O
这个作者很懒,什么都没留下…
展开
-
利用html2covans 截图,绘圈
功能展示如图所示代码实现原理:1.利用html2-cavans 对当前元素截图生成base64的图片格式2.利用cavans在img图片绘制圆圈并定位图形位置3.将绘制后的img图片再次利用html2-cavans生成新的img图片具体代码见:GITHUB...原创 2020-11-24 13:53:14 · 375 阅读 · 0 评论 -
获取本周本年本月时间
function getCurrentdate() { var startStop = new Array(); var currentDate = new Date(); var currentMonth = currentDate.getMonth(); var currentYear = currentDate.getFullYear(); .原创 2020-07-08 13:57:35 · 383 阅读 · 0 评论 -
根据后台返回的字符来绘制验证码图形
开始之前还是看一下我们想要的效果1,首先像图片当中这样的验证码图形,我们采用的canvas来绘制的2,用户的输入是自主无控制的,所以我们在提交表单之前需要对用的验证码输入进行大小写的转换//这里的code就是用户的输入 if( /[a-z]/.test(model_code) ){ code = code.tolocaleLowerCase(); ...原创 2019-03-06 16:02:41 · 1140 阅读 · 0 评论 -
前端对图片加载失败做默认图片处理
类似于下面图片展示这样:1.JQ的写法:获取该图片的class,采用jq的one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。 $('.top_mg').one("error", function(e){ //加入相应的图片类名 $(this).attr("src", &a原创 2019-03-07 10:42:19 · 5696 阅读 · 0 评论 -
记录一段table的js逻辑判断(详情见下图)
后台返回的数据机构是这样的:let list= [ {school_name: "世纪阳天体验学校", school_id: 1, score_level: 1, count: 0, proportion: 0}, {school_name: "世纪阳天体验学校", school_id: 1, score_level: 2, count: 0, ...原创 2019-03-08 11:37:02 · 450 阅读 · 0 评论 -
记录一段关于js速度运动的代码
描述:我们想要达到的效果是,当鼠标移入 ‘提示’ 框的时候,左侧的 div显示到固定位置,移出回到原始位置。1.首先我们需要了解的是 js的鼠标移入事件: (不论鼠标指针穿过被选元素或其子元素,都会触发)onmouseover : 移入onmouseout : 移出了解一下:mouseenter :只有在鼠标指针穿过被选元素时,才会触发mouseleave : 只有在鼠标指针离开被选...原创 2019-04-10 12:04:55 · 432 阅读 · 0 评论 -
对js原型和原型链的理解
原文来自:https://juejin.im/post/5c64d15d6fb9a049d37f9c20每次面试必问题,其实概念很抽象,不过我们先看一张图来理一下思路:概念:原型(prototype):一个简单的对象,用于实现对象的属性继承(即对象的爹);每一个对象都有一个__proto__的属性指向该对象的原型。构造函数:通过 new 来创建一个对象的函数实例:通过...原创 2019-04-11 17:25:21 · 721 阅读 · 0 评论 -
聊一聊js闭包以及常见的运用场景
1.首先我们有个需求是,有一段ul,循环给里面的li绑定事件;页面布局这样子的,现在我们需要用到闭包来实现这样一个需求:方法一:绑定事件放在立即执行函数中function callback(text){ document.getElementById(text.id).innerHTML = 'hello world'}function setListMsg(text){ ...原创 2019-04-12 10:37:17 · 1058 阅读 · 0 评论 -
一个数组多个对象,根据对象相同属性重新组件新数组
json结构如下:var stu_list = [ {name:'lili',uid:123,exam_id:234,score:12}, {name:'lili2',uid:321,exam_id:234,score:12}, {name:'lili',uid:123,exam_id:231,score:120}, {name:'lili2',uid:321,...原创 2019-04-20 12:37:21 · 1597 阅读 · 0 评论 -
记录一段Js:用url取值
function request(paramName) { var paramValue = ""; var params = window.location.href.split('?')[1]; if (params == null || params == "") return paramValue; var arr = params.spl...原创 2019-01-18 10:56:39 · 356 阅读 · 1 评论 -
记录一段js:判断数组元素连续或者不连续
如果我们拿到一个数组的解构是这样的:[‘2’,‘3’,‘5.5’,‘6’,‘7’,‘8’,‘12’,‘12.1’,‘13’,‘16’,‘17’]我们需要把它变成这样:2-3,5.6,6-8,12,12.1,13,16-17思路:1,先将数组连续的数字push进一个新的数组2,再通过 map 遍历这个数组function sort(arr) { var result = [];...原创 2019-01-11 12:03:04 · 5587 阅读 · 0 评论 -
如何实现图片懒加载
原文来自微信公众号:web前端学习圈什么是懒加载?懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。懒加载原理img标签有一个属性是 src,用来表示图像的URL,当这个属性的值不为空时,浏览器就会根据这个值发送请求。如果没有 src属性,就不会发送请求。...原创 2018-12-04 16:19:00 · 1074 阅读 · 0 评论 -
如何判断PC端用户缩放浏览器页面
通过向window对象添加事件句柄, 根据ctrlKey 事件属性,返回一个布尔值,指示当事件发生时,Ctrl 键是否被按下并保持住, 采用 window.devicePixelRatio 判断设备的像素比; 采用 window.onresize 来监听屏幕得变化。 (BUT,mac得像素比又待深究…….) 在不考虑兼容性得情况下代码入下:window.addEventListene...原创 2018-06-22 16:47:26 · 1889 阅读 · 0 评论 -
JS递归算法
浅谈递归就是在函数内部去调用其自身。function a(n){ if(n<= 2){ return 2 }else{ return n*arguments.callee(n-1); //4*3*2*1 }}a(4) // 24举个例子: 斐波那契数列:(兔子生兔子题目)–从出生后第3个月...原创 2018-06-25 19:58:24 · 1182 阅读 · 0 评论 -
如何将一个数组的数组项作为删除另外一个数组的索引值
var a = [1,2,3,4,5,6,7,8]var b = [2,3];function c(arr, arr2) { return arr.reduce((prev, cur, index)=&gt;{ let [idx, list] = prev; idx.indexOf(index) == -1 &amp;&amp; list.push(cur); r...原创 2018-09-05 16:25:55 · 698 阅读 · 0 评论 -
正则验证数字、小数和字符
changeNum:function(s){ if (s.score_rate == null || s.score_rate == '') { return; } var reg = /\d{0,3}\.\d{1}/;//验证小数 var regint = /\d{0,1}/; //验证数字 var regzero = /^0*$/; //验证字符 ...原创 2018-09-21 11:20:12 · 1970 阅读 · 0 评论 -
对js深拷贝和浅拷贝的理解
1.数据的基本数据类型:Number, null ,undefined , String , boolean基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。其值存储在栈内存中。2.数据的复杂(引用)数据类型:Array , Object , Function , Data引用数据类型的值储存在堆内存中,所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用...原创 2018-10-22 14:35:45 · 447 阅读 · 0 评论 -
js 相关语法(json数据处理)
1 . 将数组里面的对象的每一项的值 转换成 字符串 类型PS:比较String() 和 toString() 两种方法;都是将其它类型的变量转换为字符串的方法,BUT,toString():无法转换null和undefined故:String() 比 toString() 在我们日常工作中的应用更为广泛...原创 2018-11-20 15:01:39 · 182 阅读 · 0 评论 -
js对数组做处理(数组去重 + 数组对象去重)
1 . 利用双层循环,对数组去重function unique(arr) { var ret = []; var len = arr.length; for (var i = 0; i &lt; len; i++) { for (var j = i + 1; j &lt; len; j++) { if (arr[i] === a...原创 2018-11-21 16:18:54 · 3308 阅读 · 0 评论 -
JS进度条
<span class="data"></span> <div class="main"> <div class="line"></div> <div class="inner"></div>原创 2018-11-22 14:11:20 · 454 阅读 · 0 评论 -
分钟秒钟的倒计时
<p id='headerNum'>00:20:00</p> var hour = $('#headerNum').text().split(':')[0] var minute = $('#headerNum').text().split(':')[1] var second = $('#headerNum').text().split(':')[2] var set原创 2017-12-13 17:00:40 · 1032 阅读 · 0 评论