js代码 | 易学教程

js分页的一些思考

阅读更多关于 js分页的一些思考

一两年之前在写java的时候，分页的逻辑是写在后端的，用java去实现，jsp是动态展示页码和数据。但是对于一个用ajax加载的分页数据来说，分页的逻辑必须也在前端完成，那么就不得不去思考一下在js里如何完成分页。在开始之前，我们不妨撕思考一下，我们要展示的分页数据是什么样的，因为如果是不同的数据，那我们展示分页的代码应该是不一样的。其中就有一种是后端push过来的数据是全部的数据，我们在一个页面不方便展示，从而考虑模拟分页，总之从后端拿过来的是一个数组，我们根据不同的页码取数组中不同的部分。其实最好的方案是后端push过来的是单页的数据，根据前端传递的当前页码获取与页码，这里需要注意的是此时，后端必须把数据列表总条数也一并返给前端，因为计算页码的时候必须用到总条数。此时，后端传来的数据应该是长成这样的{total:100,list:[]} 我们现在就此种情况下的分页分析是实现，下图是效果我们先不用管数据的展示，因为我们每次从后端那来的数据里面有一个list，而我们要展示的数据就是这个list，分页的重点是在分页。在我们打开页面还没有点击页码的时候，页面应该显示的是第一页的数据。所以上来我们就应该请求一次后端，而且传递的参数应该是当前页page = 1 当前页码应该是根据我们点击页码，或者点击上一下、下一页的时候改变，在这里我们可以把页码定义一个全局变量，初始值为1

JS基础

阅读更多关于 JS基础

文章目录一、流程控制 1. 作用 2. 分类 1）顺序结构 2）分支/选择结构 1. if语句 2. switch语句 3）循环结构二、函数 1. 作用 2. 语法 3. 使用 4. 匿名函数 5. 作用域 6. 获取多个DOM元素和控制属性一、流程控制 1. 作用控制代码的执行顺序 2. 分类 1）顺序结构从上到下依次执行代码语句 2）分支/选择结构 1. if语句简单if结构 if(条件表达式){ 表达式成立时执行的代码段 } 注意 : 除零值以外，其他值都为真，以下条件为假值false if ( 0 ) { } if ( 0.0 ) { } if ( "" ) { } //空字符串 if ( undefined ) { } if ( NaN ) { } if ( null ) { } 特殊写法 : { }可以省略,一旦省略，if语句只控制其后的第一行代码 if - else结构 if(条件表达式){ //条件成立时执行 }else{ //条件不成立时选择执行 } 多重分支结构 if ( 条件 1 ) { //条件1成立时执行 } else if ( 条件 2 ) { //条件2成立时执行 } else if ( 条件 3 ) { //条件3成立时执行 } ... else { //条件不成立时执行 } [外链图片转存失败,源站可能有防盗链机制

520 简单表白代码(JS)

阅读更多关于 520 简单表白代码(JS)

这两天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙赶出个程序（新手，代码有点乱），发出来大家一起研究下（参考百度的）。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>520</title> <style> html, body{padding:0px; margin:0px; background:#222; font-family: 'Karla', sans-serif; color:#FFF; height:100%; overflow:hidden;} canvas {width:100%; height:100%;} #text,#text_520{font-family:'楷体'; color:rgb(255,255,3); font-size:20px; position:fixed; left:10%; top:10%;} #text_520{font-size:100px; top:50%; left:50%;} img{position:fixed; top:0; left:0; width:100%;} #last{font-size:12px; bottom:10px; left:50%; position:fixed;} /* @keyframes drop { 0%

Js中关于top、clientTop、scrollTop、offsetTop的用法

阅读更多关于 Js中关于top、clientTop、scrollTop、offsetTop的用法

网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; 1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj

Js中关于top、clientTop、scrollTop、offsetTop的用法

阅读更多关于 Js中关于top、clientTop、scrollTop、offsetTop的用法

Js中关于top、clientTop、scrollTop、offsetTop的用法

阅读更多关于 Js中关于top、clientTop、scrollTop、offsetTop的用法

转自： http://hi.baidu.com/taomin15201212/item/7b7d0f140d61af0f8ebde433 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; 1、offsetLeft 假设 obj 为某个 HTML 控件。

Js中关于top、clientTop、scrollTop、offsetTop的用法

阅读更多关于 Js中关于top、clientTop、scrollTop、offsetTop的用法

Js 中关于 top 、 clientTop 、 scrollTop 、 offsetTop 的用法网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth ( 包括边线的宽 ); 网页可见区域高： document.body.offsetHeight ( 包括边线的宽 ); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度： window.screen.availWidth; 1 、 offsetLeft 假设 obj 为某个 HTML 控件。 obj

js判断字符串是否为JSON格式

阅读更多关于 js判断字符串是否为JSON格式

不能简单地使用来判断字符串是否是JSON格式： function isJSON(str) { if (typeof str == 'string') { try { JSON.parse(str); return true; } catch(e) { console.log(e); return false; } } console.log('It is not a string!') } 　　以上 try/catch 的确实不能完全检验一个字符串是 JSON 格式的字符串，有许多例外： JSON.parse('123'); // 123 JSON.parse('{}'); // {} JSON.parse('true'); // true JSON.parse('"foo"'); // "foo" JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] JSON.parse('null'); // null 　　详细的描述见： https://segmentfault.com/q/1010000008460413 我们可以使用如下的方法来判断： function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof

CSS3梅花三弄特效

阅读更多关于 CSS3梅花三弄特效

效果预览： http://hovertree.com/texiao/js/22/ 效果图：代码如下： <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>CSS3+JS梅花飘落 - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/js/22/themes/hovertreemeihua.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="margin-top:60px;"><h2>若非一番寒彻骨，哪得梅花扑鼻香</h2> <h2>问世间情为何物，直教人生死相许</h2> <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/h/bjaf/meihua.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a> </div> <div id="hewenqi"> <div class="playHovertree"> </div>

原生JS DOM对象与jQuery对象的区别、联系、相互转换

阅读更多关于原生JS DOM对象与jQuery对象的区别、联系、相互转换

大家好!我们之前讲了一些关于原生JS的一些操作,今天我们来讲一下原生JS DOM对象与jQuery对象的区别、联系、相互转换. Dom原生对象和jQuery对象的区别: jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价 . 注:js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合.所以说他们两者是不同的对象类型不等价. jQuery无法使用DOM对象的任何方法,同理Dom对象也不能使用jQuery里的方法.乱使用会报错. 例: $("#id").html(); document.getElementById("id").innerHTML; 意思是指:获取ID名为id的元素内的html代码.这两段代码结果相同,中间的取值过程不同. 即:$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的. 注:jQuery是从js衍生出来的,师处同源,但是jQuery是经过一系列操作之后,将其封装成了一个个不同的方法,学习jQuery开始就应当树立正确的观念,之后学习jQuery就会轻松很多的. js-dom对象和jQuery对象相互转换:

订阅 js代码