
javascript
叶子_o
这个作者很懒,什么都没留下…
展开
-
elint 报错 Do not access Object.prototype method ‘hasOwnProperty‘ from target object
elint 报错 `Do not access Object.prototype method 'hasOwnProperty' from target object`原创 2023-03-10 17:29:46 · 147 阅读 · 0 评论 -
js实现返回上一页并刷新
需求:在详情页经历一系列刷新/重新加载的操作后,点击提交成功后跳转到上一页,并刷新上一页。1.提交接口执行成功后的回调setTimeout(function(){ sessionStorage.setItem("issue_wait",true); window.history.back();},1000)2.要跳转的列表页加载时的操作var lastUrl = document.referrer; // 上一页的url// console.log(lastUrl,"lastUrl原创 2020-06-09 15:08:32 · 721 阅读 · 0 评论 -
两种情况下设置select下拉框的默认值
默认值固定/已知的情况:使用selected属性默认选中第二个<select name="plan" id="plan"> <option value="free">Free</option> <option value="starter" selected>Starter </option> <option value="professional">Professional</option>原创 2020-05-15 18:56:57 · 19674 阅读 · 1 评论 -
通过event.persisted和window.performance判断页面是否为后退进入
今天有一个需求是判断页面为通过后退进入的时,重新加载页面刷新。window.performance.navigation.type == 2 通过后退返回该页面event.persisted 从缓存获取数据时为true,否则为falsewindow.onpageshow = function(event) { if (event.persisted || window.perform...原创 2020-03-07 22:23:45 · 4574 阅读 · 0 评论 -
event.pageY 与 event.currentTarget.getBoundingClientRect().top
event.pageYevent.currentTarget.getBoundingClientRect().top两者都可用来获取鼠标事件触发时,距离顶部的距离。不同的是 event.pageY 获取的是距离文档顶部的,event.currentTarget.getBoundingClientRect().top获取的是距离窗口顶部的。...原创 2019-12-04 18:03:40 · 913 阅读 · 0 评论 -
BOM
一、BOM简介Browser Object Model 核心是windowDOMBOM文档对象模型浏览器对象模型二、window对象浏览器的顶级对象js访问浏览器窗口的一个接口在全局作用域中定义的变量、函数等,自动变成window对象的的属性和方法。// 全局变量,全局作用域var a = 10;console.log(a, window.a);...原创 2019-11-22 21:56:54 · 141 阅读 · 0 评论 -
深拷贝的几种方法
1.JSON方法实现//_tmp和result是相互独立的,没有任何联系,有各自的存储空间。let deepClone = function (obj) { let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式 let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象 return ...转载 2019-11-08 00:01:08 · 4313 阅读 · 2 评论 -
js中的垃圾回收机制与常见的内存泄漏及解决
垃圾回收机制:JS的垃圾回收机制是为了以防内存泄漏,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。一般来说没有被引用的对象就是垃圾,就是要被清除, 有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。常见的js内存泄漏1、意外的全局变量js对未声明变量会在...原创 2019-11-07 23:55:28 · 162 阅读 · 0 评论 -
js中 json对象与json字符串相互转换的几种方式
今天在工作中,需要在前端 将需要提交至服务器的数据 组装成json对象,然后转化为字符串,提交至后端。nodes = $('#PmPbsSelect_tree').tree('getChecked');var data=[];for(var i=0;i<nodes.length;i++){ if(!isParentCheck(nodes[i],nodes)){ ...原创 2019-11-07 21:34:40 · 791 阅读 · 0 评论 -
移动端触摸(touch)事件
首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有,但在这里我还是有必需对这三个词进行一翻不必要的解释。touchstart:手指触摸到一个 DOM 元素时触发。touchmove:手指在一个 DOM 元素上滑动时触发。touchend:手指从一个 DOM 元素上移开时触发。这三个事件又分别对应三个相...转载 2019-11-07 16:39:12 · 561 阅读 · 1 评论 -
编写一个通用的事件绑定函数
function bindEvent(elem, type, selector, fn){ // 不使用代理时,即只有三个参数时,将第三个参数(函数)赋值给第四个参数,再将第三个参数设置为null if(fn == null) { fn = selector; selector = null; } elem.addEventListener(type, function (e) ...原创 2019-10-16 16:17:27 · 248 阅读 · 0 评论 -
用js打印四种形状的九九乘法表
第一种形状document.write("<table>")for(var i=1; i<=9; i++){ document.write("<tr>"); for(var j=1; j<=i; j++){ document.write("<td>" + i + "x" + j + "="原创 2018-12-28 17:15:17 · 2129 阅读 · 1 评论 -
js实现简单的放大镜效果
在浏览电商网站时,我们经常会看到那种鼠标悬浮时,侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。css部分*{ margin:0; padding:0;}#box{ position:relative; margin:200px; width:350px; height:350px; border:1px solid #666;}#small{ po...原创 2019-02-18 11:49:48 · 284 阅读 · 0 评论 -
js实现简单的进度条效果
下面用js实现一个简单的进度条从0%逐渐增加到100%的效果。css部分*{ margin:0; padding:0;}#box{ position:relative; margin:100px auto; width:300px; height:30px; border:2px solid #666;}#range{ position:absolute; /*wid...原创 2019-02-18 12:04:32 · 3050 阅读 · 0 评论 -
git常用操作
pwd 显示工作目录ls 显示所有文件ls -a 显示所有文件(包括隐藏的)cd 切换目录mkdir 创建目录git init 初始化一个git仓库(创建一个git文件夹)git status 查看当前工作区 暂存区 本地仓库的状态git add 将工作区的文件添加到暂存区git commit -m ”文字说明” 将暂存区的所有文件提交到本地仓库git config --gl...原创 2019-02-28 16:20:03 · 107 阅读 · 0 评论 -
js实现简单的掷骰子效果
本案例要实现的效果:点击按钮,使骰子转动起来,转动随机时间之后,自动停止在某一个点数上。思路:点击按钮之后,将原本静态的骰子图片替换为一个动态转动的gif图片;创建定时器,实现随机时间之后,动态的图片随机替换为1~6点图片的任意一张图片。注意:要考虑用户点击一次按钮后再连续多次点击按钮的情况。为了防止不必要的问题,需要设置使定时器执行完毕一次之后,再点击按钮才有效。这里设置了...原创 2019-02-19 13:25:08 · 5419 阅读 · 0 评论 -
location对象的assign()、reload()、replace()方法的区别
1.assign()载入一个新文档,浏览器的后退按钮可用。window.location.assign("www.baidu.com");2.replace()用新的文档替换当前文档,浏览器的后退按钮不可用,也就是不可以后退。window.location.replace("www.baidu.com");3.reload()重新载入当前文档。location.reload()...原创 2019-02-19 14:30:28 · 2411 阅读 · 0 评论 -
js面试知识点整理
变量类型值类型和引用类型值类型只能存储一个值值类型复制就是值类型本身引用类型复制只是复制引用类型的指针引用类型:对象,数组,函数引用类型特点:可以无限制的扩展属性JS中使用typeof能得到哪些类型:7种类型undefined string number boolean symbol object functiontypeof不能详细区分引用类型(对象、数组)的详细类型但是可以...转载 2019-04-26 01:15:28 · 725 阅读 · 0 评论 -
鼠标拖动绘制方框
近期做项目遇到了这样一个需求,鼠标拖动绘制div,封装了一个小插件,代码如下。html部分<div id="main"></div>增加一个按钮,可以关闭绘画效果,用来配合测试删除功能<input type="button" value="停止绘画" id="t"/>css部分<style> *{ box-sizi...原创 2019-04-22 15:55:20 · 880 阅读 · 0 评论 -
vdom -- 虚拟dom
为什么会有vdom?DOM操作是“昂贵”的,js运行效率高应尽量减少DOM操作,而不是“推倒重来”项目越复杂,影响就越严重vdom可以解决这个问题解决virtual dom, 虚拟DOMvdom就是用JS虚拟DOM结构因为DOM操作非常“昂贵”将DOM对比操作放在JS层,提高效率vdom的使用vdom指的是一类技术实现,能实现vdom的库有很多,这里拿snabbdom...原创 2019-05-05 01:08:24 · 420 阅读 · 0 评论 -
冒泡排序
冒泡排序的原理:将一组数据进行从小到大排序。第一轮比较:第一次将第一个数和第二个进行比较,如果第二个数小于第一个数,将这两个数交换位置;第二次将第二个数和第三个数比较,如果第三个数小于第二个数,将这两个数交换位置;以此类推,经过第一轮的逐次比较后,最后在最后一位数得到最大的数。经过多轮比较后,将得到一组按照从小到大顺序排列的数据。这就是冒泡排序。js实现冒泡排序:分析:4个数时i...原创 2019-01-22 18:20:46 · 130 阅读 · 0 评论 -
数组常用的api
api全称:application interface 应用程序接口1. 数组添加元素push() 在数组末尾追加一个或多个元素var arr = [98,97,65,89];arr.push(100); //在末尾追加一个元素100arr.push(101,102); //也可添加多个元素,多个元素用逗号隔开var num = arr.push(200); //返回值为追加元素后...原创 2019-01-22 17:04:00 · 304 阅读 · 0 评论 -
arguments对象及其应用
arguments对象一、概念:函数内置的一个类数组对象,存储了所有的实参。二、属性:实参个数:arguments.length形参个数:函数名.lengtharguments应用实例实例一:定义一个函数,求两个数的和function getSum(num1,num2){ console.log(arguments.length); //打印实参的个数 console.log(...原创 2019-01-22 15:31:07 · 455 阅读 · 0 评论 -
三种方法判断一个数是否为素数
方法一:判断因数的个数是否等于2var num = parseInt(prompt("请输入一个数"));var count = 0;for(var i=1; i<=num; i++) { if(num%i === 0) { count++; }}if(count === 2){ alert(num + "是素数");}方法二:先假设该数是素数,当遇到有除了1和它本...原创 2019-01-04 09:15:18 · 9449 阅读 · 3 评论 -
求1-1/2+1/3-1/4+1/5+...1/100
var i = 1;var sum = 0;for(var j=1;j<=100;j++){ sum = sum + i/j; i = -i;}console.log(sum);原创 2019-01-04 09:04:29 · 5626 阅读 · 0 评论 -
求出一个数所有的因数
var num01 = parseInt(prompt("请输入一个数"));var ys = "";for(var i=1;i<=num01;i++){ while(num01%i === 0){ ys = ys + i+" "; break; }}alert("数字"+num01+"的因数为"+ys);...原创 2019-01-04 09:03:42 · 8720 阅读 · 0 评论 -
计算三位数各个位上数字的和
var num = parseInt(prompt("请输入一个三位数"));var bai = parseInt(num / 100);var shi = num / 10 % 10;var ge = num % 10;alert(bai + shi + ge);原创 2019-01-04 09:01:41 · 3684 阅读 · 0 评论 -
通过JS给div元素设置样式的几种方法
一、style&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;//js部分&amp;lt;script&amp;gt; var oDiv = document.querySelector(&quot;div&quot;); //第一种方法:分别添加属性 oDiv.style.width = &quot;2原创 2018-12-17 16:55:34 · 13634 阅读 · 0 评论 -
事件冒泡与阻止事件冒泡
事件冒泡下面用一个小例子来说一下对事件冒泡的理解。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡与阻止事件冒泡</title> <style> div{原创 2018-12-27 17:24:42 · 226 阅读 · 0 评论 -
用js实现鼠标后跟随一串叶子的效果
做了一个比较有意思的效果,鼠标移动的过程中,后边紧跟一串树叶或者小圆点(可以根据实际需求把元素替换成你想要的东西)。html部分//一些标签元素,会随着鼠标移动<span class="circle" style="top:200px;left:150px;"></span> <span class="circle" style="top:300px;left.原创 2018-12-27 15:36:36 · 832 阅读 · 0 评论 -
简单的js实现图片跟随鼠标移动效果
概述:通过获取鼠标距离页面的左边距和上边距,来动态设置图片的left和top值。html部分<img src="./img/qqhf-16.jpg" width="60" alt="">css部分<style> img{ position:absolute; //设置图片绝对定位 }</style>js部分<script原创 2018-12-26 17:51:32 · 3829 阅读 · 0 评论 -
任意输入一个正整数,判断这个数的位数
var int = parseInt(prompt("请输入一个正整数"));var count = 1;while(int>=10){ count++; int = int/10;}alert("这个数的位数是" + count);原创 2019-01-04 09:17:58 · 6453 阅读 · 2 评论 -
原生js实现简单的倒计时效果
在页面中,我们经常有可能会遇到倒计时效果,下边就是一个简单的倒计时,用到的主要知识在于对Date对象的getTime()方法及setInterval定时器的运用,希望可以为你带来参考。html部分<p id="count">倒计时:<span></span>天<span></span>时<span></s原创 2018-12-25 15:43:52 · 506 阅读 · 0 评论 -
js判断数组中是否包含某个值
function has(arr,num) { var bool = false; //默认不在数组中 for(var i=0,len=arr.length; i<len; i++) { //遍历数组的值 if(arr[i] === num){ bool = true; //若存在某个值与改值相等,bool值为true } } return bool; //返回boo...原创 2019-01-08 11:40:53 · 3967 阅读 · 0 评论 -
js打印空心的菱形
打印如下图形: * * * * ** * * * * * *思路:可将其分为上下两部分分别打印,先打印前四行,再打印后三行。中间的星号和空格都按星号考虑。代码如下:// 将图形分为两部分打印,先打印前四行for(var i=1; i&lt;=4; i++){ //打印空格 for(var j=1; j&lt;=4-i;j++){ docume...原创 2019-01-22 14:40:02 · 1010 阅读 · 0 评论 -
js求1!+2!+3!+4!+5!
思路:1!+2!+3!+4!+5! 可以理解为 1!+2 * 1!+3 * 2!+4 * 3!+5 * 4!var sum = 0;var sum2 = 1;for(var i=1; i<=5; i++){ sum2 = sum2*i; //计算i的阶乘 sum = sum+sum2; //保存阶乘的和}alert(sum);...原创 2019-01-22 11:09:45 · 5337 阅读 · 0 评论 -
js关于dom的操作
1.找元素document.getElementById() //通过id查找元素,前边只能是document,不能是某个特定的父元素document.getElementsByTagName() //通过标签名获取元素document.getElementsByClassName() //ie9+支持document.getElementsByName() //ie中只对表单...原创 2019-01-15 14:35:42 · 135 阅读 · 0 评论 -
es5新增的数组方法
常用的数组元素的迭代方法。1. forEach()方法forEach()方法的功能是循环遍历数组中的每一个元素;forEach()方法会接收一个函数;这个函数包含三个形参,分别为:item, index, array, 用不到时可以不写item 表示每次迭代的元素index 表示每次迭代元素的下标array 表示原数组var arr = [20,13,11,8,0,11];v...原创 2019-01-24 18:07:09 · 2496 阅读 · 0 评论 -
数组的sort()方法
sort()方法是数组自带的一种排序方法,默认情况下会将元素按照字符串进行比较。1. 当元素为字符串时将元素从字符串从第一位开始比较,第一位相同时比较后一位。var arr = ["cb","a","g","cy"];arr.sort();console.log(arr); //["a","cb","cy","g"]2.当元素为数字时原创 2019-01-24 15:21:27 · 23916 阅读 · 1 评论 -
选择排序
选择排序的思路:第一轮:将第二个数、第三个数…分别于第一个数比较大小,如果小于第一个数,则将该数与第一个数交换位置,最终使第一个数为最小值第二轮:将第三个数、第四个数…分别与第二个数比较大小,如果小于第二个数,则将该数与第二个数交换位置,最终使第二个数为数组中第二小的值…最终得到一组从小到大顺序排列的数据。这就是选择排序。function selectSort(arr){ var te...原创 2019-01-24 14:30:28 · 112 阅读 · 0 评论