js | 易学教程

js二维数组和多维数组

阅读更多关于 js二维数组和多维数组

先来打印一个二维数组 var arr = [ ] ; for ( var i = 0 ; i < 10 ; i ++ ) { arr [ i ] = [ ] ; for ( var j = 0 ; j < 10 ; j ++ ) { arr [ i ] [ j ] = i * 10 + j ; } } console . log ( arr ) ; 打印出的结果如下图所示：每一行每一列都有唯一对应值。多维数组： var arr = [ ] ; for ( var i = 0 ; i < 3 ; i ++ ) { arr [ i ] = [ ] ; for ( var j = 0 ; j < 3 ; j ++ ) { arr [ i ] [ j ] = [ ] ; for ( var k = 0 ; k < 3 ; k ++ ) { arr [ i ] [ j ] [ k ] = i * 100 + j * 10 + k ; } } } console . log ( arr ) ; //如果如下 arr = [ [ [ 0 , 1 , 2 ] , [ 10 , 11 , 12 ] , [ 20 , 21 , 22 ] ] , [ [ 100 , 101 , 102 ] , [ 110 , 111 , 112 ] , [ 120 , 121 , 122 ] ] , [ [ 200

js 实现图片无限横向滚动效果

阅读更多关于 js 实现图片无限横向滚动效果

门户网站好多都有产品无线滚动展现的效果：测试demo1 -- 非无缝滚动（可以看出来从头开始的效果）: css样式如下： .box{ width: 1000px; border: 1px solid #ccc; overflow: hidden; height: 110px; margin: 50px auto; white-space: nowrap; position: relative; } .con1{ width: 1000px; height: 110px; overflow: hidden; position: absolute; left: 0; } .con2{ position: absolute; overflow: hidden; opacity: 0; } html代码如下： <div class="box"> <div class="con1"> <li><img src="img/SD_1.jpg" alt=""></li> <li><img src="img/SD_2.jpg" alt=""></li> <li><img src="img/SD_3.jpg" alt=""></li> <li><img src="img/SD_4.jpg" alt=""></li> <li><img src="img/SD_5.jpg" alt=""></li>

JS 执行上下文

阅读更多关于 JS 执行上下文

先看个小例子 function fn(){ console.log(a);//undefined; var a = 1; } fn(); 为什么打印出来的是 undefined 呢？执行上下文概念　　当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。　　在 JavaScript 的世界里，运行环境有三种，分别是：　　　　1.全局环境：代码首先进入的环境　　　　2.函数环境：函数被调用时执行的环境　　　　3.eval函数： https://www.cnblogs.com/chaoguo1234/p/5384745.html （不常用）执行上下文特点　　1.单线程，在主进程上运行　　2.同步执行，从上往下按顺序执行　　3.全局上下文只有一个，浏览器关闭时会被弹出栈　　4.函数的执行上下文没有数目限制　　5.函数每被调用一次，都会产生一个新的执行上下文环境执行上下文栈　　执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会产生执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。　　其实这是一个压栈出栈的过程——执行上下文栈。　　　　　

PageHelper分页插件及通用分页js

阅读更多关于 PageHelper分页插件及通用分页js

分页概述 1.物理分页物理分页依赖的是某一物理实体，这个物理实体就是数据库，比如MySQL数据库提供了limit关键字，程序员只需要编写带有limit关键字的SQL语句，数据库返回的就是分页结果。建议使用。 2.逻辑分页逻辑分页依赖的是程序员编写的代码。数据库返回的不是分页结果，而是全部数据，然后再由程序员通过代码获取分页数据，常用的操作是一次性从数据库中查询出全部数据并存储到List集合中，因为List集合有序，再根据索引获取指定范围的数据。 MyBatis 分页插件 - PageHelper 该插件目前支持以下数据库的物理分页 : Oracle Mysql MariaDB SQLite Hsqldb PostgreSQL DB2 SqlServer(2005,2008) Informix H2 SqlServer2012 Derby Phoenix 分页插件 5.0 由于分页插件 5.0 版本和 4.2.x 实现完全不同，所以 master 分支为 5.x 版本，4.2 作为一个分支存在，如果有针对 4.2 的 PR，请注意提交到分支版本。集成使用 PageHelper 你只需要在 classpath 中包含 pagehelper-x.x.x.jar 和 jsqlparser-0.9.5.jar 。如果你使用 Maven，你只需要在 pom.xml 中添加下面的依赖

js实现数组去重

阅读更多关于 js实现数组去重

数组去重是笔试及面试时的重要考题，现对已有方法进行如下总结：（1）思路：新建一个空的数组newArr,将需要去重的数组中的第一个元素传入，依次与原数组中剩余的元素进行比较，不重复则把元素传入到新数组newArr中。这种方法实现思路简单，由于使用‘===’，可以实现对类似2和‘2’这种数字与字符串的比较。但是该算法创建了新的数组，并且使用双层循环，对时间和空间均存在一定的浪费。 1 Array.prototype.unique1 = function(){ 2 var newArr = [this[0]]; 3 //flag用来比较数组是否重复，不重复为true,重复为false 4 var flag = true; 5 for(var i = 1;i < this.length;i++){ 6 for(var j = 0; j < newArr.length; j++){ 7 if(newArr[j] === this[i]){ 8 flag = false; 9 break; 10 }else{ 11 flag = true; 12 } 13 } 14 if(flag){ 15 newArr.push(this[i]); 16 } 17 } 18 } 19 20 var arr=[1,2,2,'2',3,4,4,'a','a','b']; 21 console.log(arr

js 模拟form表单post提交

阅读更多关于 js 模拟form表单post提交

1 var generateHideElement = function (name, value) { 2 var tempInput = document.createElement("input"); 3 tempInput.type = "hidden"; 4 tempInput.name = name; 5 tempInput.value = value; 6 return tempInput; 7 } 8 9 var form = document.createElement("form"); 10 document.body.appendChild(form); 11 12 13 var jData = generateHideElement("jData", "11"), 14 jsongroups = generateHideElement("jsongroups", "22"), 15 cacheKey = generateHideElement("cacheKey", "33"), 16 execlName = generateHideElement("execlName", "44"); 17 18 19 20 21 form.appendChild(jData); 22 form.appendChild(jsongroups); 23 form

JS实现时钟特效

阅读更多关于 JS实现时钟特效

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现时钟</title> <style> .clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock.jpg) no-repeat; position: relative; } .clock div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .h { background: url(images/hour.png) no-repeat center center; } .m { background: url(images/minute.png) no-repeat center center; } .s { background: url(images/second.png) no-repeat center center; } </style> </head> <body> <div class="clock" id="clock"> <div class="h" id="h"></div> <div class="m" id="m">

JavaWeb（4）-JS对象

阅读更多关于 JavaWeb（4）-JS对象

JS对象 js的string对象创建string对象 string对象常用属性、方法 js的array对象创建array对象 array对象常用属性、方法 js的Date对象获取当前时间常用方法转换时间格式获取当前的年、月、日、星期、时间 js的Math对象 js的全局函数 js函数的重载 js的bom对象 1.bom 2.对象：（1）navigator （2）screen （3）location （4）history （5）window js的dom对象解析过程 node接口的特性和方法 DHTML js的document对象常用方法 getElementById() getElementsByName() getElementsByTagName() write() js的string对象创建string对象 var str = "abc" ; string对象常用属性、方法 1.属性 length表示字符串的长度 2.方法（1）与html相关的方法 bold()方法：使用粗体显示字符串 str.bold() fontcolor()：设置字符串颜色 str.fontcolor("red"); fontsize()：设置字符串尺寸 str.fontsize(5) link()：将字符串显示为超链接 str.link(url) sub(),sup()

JS实现简单时钟效果

阅读更多关于 JS实现简单时钟效果

老师上课需要我们做一个时钟的小作业，我把它放在上面记录一下啦表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，transform-origin设置它们的旋转中心具体效果： HTML代码： <div class="box" id="box"> <span></span> <span></span> <span></span> </div> css代码： div.box{ width: 620px; height: 620px; background: url("images/time.jpg") no-repeat; background-size: 100%; margin: 20px auto; position: relative; } div.box span{ position: absolute; } div.box span:nth-child(3){ width: 58px; height: 208px; background: url("images/time_1.png") no-repeat -8px -44px; left: calc(50% - 29px); top: 130px; transform-origin: center 174px; } div.box span:nth-child(2){

JS之数组的几个不 low 操作

阅读更多关于 JS之数组的几个不 low 操作

JS之数组的几个不 low 操作 1.扁平化n维数组 1）终极篇 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5] [1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n] Array . flat ( n ) 是ES10扁平数组的api， n 表示维度， n 值为 Infinity 时维度为无限大。 2）开始篇 function flatten(arr) { 　　while(arr.some(item=>Array.isArray(item))) { 　　　　arr = [].concat(...arr); 　　} 　　return arr; } flatten([1,[2,3]]) //[1,2,3] flatten([1,[2,3,[4,5]]) //[1,2,3,4,5] 实质是利用递归和数组合并方法 concat 实现扁平。 2.去重 1）终极篇 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4] set 是ES6新出来的一种一种定义不重复数组的数据类型。 Array . from 是将类数组转化为数组。 ... 是扩展运算符

订阅 js