js | 易学教程

前端笔试、面试题 - JS

阅读更多关于前端笔试、面试题 - JS

1、数组扁平化(数组降维) 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]]　　------>　　[1, 2, 3, 4, 5] 2、给定一个数组，将数组中的所有0移动到末尾，并保持非0元素的顺序不改变。如 [0,1,0,3,12] 移动后的期望数组为 [1,3,12,0,0] 要求：1、不能创建新的数组来做操作　　 2、尽量少的操作次数 3、写出下列两行代码处理后的返回数据 ['1','2','3'].map(parseInt); ['1','2','3'].filter(parseInt); 来源： https://www.cnblogs.com/donghuang/p/12542511.html

关于用js写缓动动画

阅读更多关于关于用js写缓动动画

关于制作简单的缓动动画，动画和dom是js的两大弱项，但是有时候又不得不用js所以下面做一个js的简单封装函数；首先解释缓动的思想：若target是目标距离，step为步长，object是对象， var step=(target-object.offsetLeft)/10; 我们拿盒子的距离-目标对象的左偏移量； object.style.left = 盒子本身的位置 + 步长；当然不要忘记取整；一般在计算距离通常无小数 step=step>0 ? Math.ceil(step):Math.floor(step); 最后在开始和结束时不要忘记清除计时器； clearInterval(object.timer); 下面看一下封装好的代码： function animate(object,target){ //object要动的对象 target 要动的距离 clearInterval(timer);//清楚定时 object.timer=setInterval(function(){ // 计算步长动画的原理盒子本身的位置 + 步长 var step=(target-object.offsetLeft)/10; //对步长取整； step=step>0 ? Math.ceil(step):Math.floor(step); // object.style.left =

JS--排序之快排和归并

阅读更多关于 JS--排序之快排和归并

目录 JS排序算法之快排和归并快速排序归并排序 JS排序算法之快排和归并快速排序原理: 选择一个key(一般是第一个元素), 将数组划分为两个区域. 左边全部区域小于等于key, 右边全部大于key. 然后在通过这种方法将每个区域划分为两个区域. 整个过程可以递归实现,以此实现整个数据有序时间复杂度: O(n*log(n)) 最坏时间复杂度: O(n^2) 最坏情况: 原数组是升序(降序), 需要排成降序(升序) 不稳定的排序特性: 数组分块,且左边区域小于右边(升序) 不稳定原因: 元素交换是跨元素直接交换, 相邻相同元素可能发生位置交换性能: 最好的的快速排序方法示例过程: function quickSort(ary) { let n = ary.length; function sort(ary, start, end) { if(end <= start) return; let i = start, j = end, key = ary[start]; // 设置第一个元素为key while(true) { // 从左向右找到大于key的元素位置(大于key循环停止, i就是该元素位置) while(ary[++i] < key) { // 到达末尾退出循环 if(i === end) break; } // 从右向左找到小于key的元素位置

原生Js实现图片无缝滚动

阅读更多关于原生Js实现图片无缝滚动

废话少说，直接上代码： <!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript无缝滚动 by 司徒正美" /> <meta name="description" content="javascript无缝滚动 by 司徒正美" /> <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { position:relative; width: 400px; overflow:hidden; border: 10px solid #B45B3E; } #marquee img { border:0px; } #marquee dl, #marquee dt,#marquee dd,#marquee a { float:left; margin:0; padding:0; } #marquee dl{ width:1000%;

Js实现两列div高度自适应

阅读更多关于 Js实现两列div高度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>两列div高度需要自适应的问题</title> <style> *{ margin:0px; padding:0px;} #wrap{ width:776px; border:1px solid #f00; background: url(bg1.png) repeat; overflow:auto;} #cloumn1{ float:left; width:298px; border:1px solid #ccc;} #cloumn2{ float:right; width:474px; border:1px solid #00F;} .clear{ clear:both;} </style> </head> <body> <div id="wrap"> <div id=

JS验证日期及时间

阅读更多关于 JS验证日期及时间

验证日期+时间代码 1 function checkDateTime(date){ 2 var reg = / ^(\d{1,4})(-|\ / )(\d{ 1 , 2 })\ 2 (\d{ 1 , 2 }) (\d{ 1 , 2 }):(\d{ 1 , 2 }):(\d{ 1 , 2 })$ / ; 3 var r = date.match(reg); 4 if (r == null ){ 5 alert( " 输入格式不正确，请按yyyy-MM-dd HH:mm:ss的格式输入！ " ); 6 return false ; 7 } else { 8 return true ; 9 } 10 } 日期格式化代码 1 Date.prototype.format = function (format) // author: meizz 2 { 3 var o = { 4 " M+ " : this .getMonth() + 1 , // month 5 " d+ " : this .getDate(), // day 6 " h+ " : this .getHours(), // hour 7 " m+ " : this .getMinutes(), // minute 8 " s+ " : this .getSeconds(), // second 9 " q+ " :

前端开发必备的Sublime 3插件

阅读更多关于前端开发必备的Sublime 3插件

一、安装Sublime Text3 网址：http://www.sublimetext.com/3 注册码：（ sublime Text3汉化和激活注册码） ----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------ 二、安装 package control 说明网址： https://packagecontrol.io/installation 自动安装（代码安装）方法： 1、按住Ctrl+~键，调出控制台。 2、输入： import urllib.request,os,hashlib;

Webpack打包进阶

阅读更多关于 Webpack打包进阶

说在前面由于使用了React直出，页面各项性能指标使人悦目。本篇将深入探讨目前PC部落所采用webpack打包优化策略，以及探讨PC部落并未使用的 webpack Code Splitting 代码分包、异步模块加载特性。看看它们又是如何对PC部落的性能起到进一步的催化作用。为什么要使用webpack 如果你曾经使用过 Broserify, RequireJS 或类似的打包工具，并注重：代码分包、异步加载、静态资源打包（图片/CSS）。那么 webpack 就是帮你构建项目的利器！简单一句话：在webpack中，所有资源都被当作是模块，js可以引用 css , css 中可以嵌入图片 dataUrl。 webpack特性对应不同文件类型的资源，webpack有对应的模块 loader ，比如对于 less，使用的是 less-loader ，你可以在这里找到所有loader . webpack 具有requireJS 和 browserify 的功能，但仍有自己的新特性： 1、对 CommonJS、AMD、ES6的语法做了兼容； 2、对js、css、图片等资源文件都支持打包； 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性，例如对 coffeeScript、ES6的支持； 4、有独立的配置文件 webpack.config.js; 5、可以将代码切割成不同

vue中的js绑定样式

阅读更多关于 vue中的js绑定样式

添加class 对象形式添加 activated为true时p标签的class为activated false时为空 <div id="app"> <p :class="{activated:activated}">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ activated:true } }) </script> 数组形式添加 activated的值是data中的内容即activated <div id="app"> <p :class="[activated,activated1]">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ activated:"activated" } }) </script> style绑定样式对象形式 <div id="app"> <p :style="styleObj">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ styleObj:{ color:"red" } } }) </script> 数组形式 <div id="app"> <p :style="[styleObj,styleObj1]">内容部分</p><

【zTree】 zTree使用的小例子

阅读更多关于【zTree】 zTree使用的小例子

使用zTree树不是第一次了但是还是翻阅着之前做的对照着使用起来比较方便这里就把小例子列出来总结一下使用步骤这样方便下次使用起来方便一点使用zTree树的步骤： 1.首先在jsp中引用zTree相关的 CSS文件和JS文件 2.其次在jsp中设置zTree的容器，一般一个<ul id="treeDemo" class="ztree" style="display:none;"></ul>就足够了但是必须要设置id，是为了后续的方便使用 3.再者在js中配置zTree的setting 配置信息 4.如果数据是动态的则将动态获取到的数据动态组成ztree的节点 5.初始化 zTree树 JSP页面： 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request

订阅 js