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验证日期及时间

验证日期+时间代码 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、可以将代码切割成不同

【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

day15 CSS JS DOM初探

阅读更多关于 day15 CSS JS DOM初探

居中 line-hight 是上下 text-line 是左右实现一个返回顶部的功能： 1 先写好CSS 2 写动作JS 写一个悬浮菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ margin: 0 auto; height: 48px; width:980px; background-color: aquamarine; color: coral; position: fixed; top: 0; left: 20px; right: 20px; line-height: 48px; text-align: center; } .pg-body{ margin: 0 auto; background-color: #dddddd; width:980px; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">此处为菜单</div> <div class="pg-body">此处为内容</div> </body> </html> 效果：上下滚动菜单始终固定在顶部实现一个点赞按钮的效果： <

js 实现div跟随鼠标移动

阅读更多关于 js 实现div跟随鼠标移动

今天看到了一个自己可以随心所欲的拖到div到页面的任意位置。感觉挺好的，就心血来潮的查询了一下，看看网友做的代码如下： <script> function doit(){ var obj = document.getElementById("pad"); obj.style.left = event.x+10; obj.style.top = event.y+10; } window.onload=function(){ document.body.onmousemove = doit; } </script> <div id="pad" style="padding:0px;margin:0px;width:10px;height:10px;left:0px;top:0px;background-color:#ff0000;position:absolute;z-index:100;"></div> 这个网友说不支持FF！！ <script> function doit(e){ var obj = document.getElementById("pad"); obj.style.left = e.pageX+10; obj.style.top = e.pageY+10; } window.onload=function(){ document.body.onmousemove

js动态添加事件

阅读更多关于 js动态添加事件

转载的，但不明确出处往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性，简单，很好理解，但是：IE 不支持， IE 并不是不支持 setAttribute 这个函数，而是不支持用 setAttribute 设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。 LEO:在IE6下尝试成功方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj

js事件处理函数/监听函数

阅读更多关于 js事件处理函数/监听函数

当我们刚接触js的时候,我我们需要给一个鼠标绑定是一个事件的时候,通俗的说就是当鼠标发生一定动作的时候,需要去干什么..比如当click鼠标的时候需要做什么.我们或许会这样写: 1 var getObj = document.getElementById( 'obj' ); //从html节点中找到那个对象. 2 3 getObj.onclick = function (){ //绑定一个事件,当鼠标点击的时候,执行匿名函数里的代码. 4 5 //do something 6 7 } 这样的做法确实很好,并且所有的浏览器都支持该方法,但是久而久之,你会发现,加入要给一个对象绑定多个事件怎么办?写上很多个getObj.onclick = ...?但是这样确实不行的,如果真这样做了,前边的事件会被后面的事件覆盖,得不到想要的结果.这时候我们想到了事件监听函数. IE的事件监听函数: attachEvent (name_event,func) 它的第一个参数是需要绑定的事件的名字,第二个是需要执行的函数句柄,现在你就可以在IE浏览器下一次绑定多个事件了,例如: 01 var click1 = function (){ 02 03 alert( "第一个事件" ); 04 05 }; 06 07 var click2 = function (){ 08 09 alert(

订阅 js代码