TP中js实现每页显示数量

page_num

1、通过$_GET[‘pnum’]传递每页显示数量。

2、通过JS获取option值,拼接url地址。
var url = “{:U(‘Order/index/’)}”+”?pnum=”+pageNum;

3、JS跳转到url地址,通过$_GET[‘pnum’]传值。

Select Code
1
2
3
4
5
6
// 每页显示多少条
$("#pageOption").change(function(){
    var pageNum = $("#dataTables-example_length option:selected").attr('attr_value');
    var url = "{:U('Order/index/')}"+"?pnum="+pageNum;
    window.location.href = url;
})

4、选项。

Select Code
1
2
3
4
5
6
7
<select class="form-control input-sm" aria-controls="dataTables-example" name="dataTables-example_length" id="pageOption">
    <option value="2" attr_value="2" <if condition="(I('get.pnum') eq 2)">selected="selected"</if>>2</option>
    <option value="10" attr_value="10" <if condition="(I('get.pnum') eq 10)">selected="selected"</if>>10</option>
    <option value="25" attr_value="25" <if condition="(I('get.pnum') eq 25)">selected="selected"</if>>25</option>
    <option value="50" attr_value="50" <if condition="(I('get.pnum') eq 50)">selected="selected"</if>>50</option>
    <option value="100" attr_value="100" <if condition="(I('get.pnum') eq 100)">selected="selected"</if>>100</option>
</select> 条数/页</label>

分享2个简单实用的jQuery选择器

1、子选择器:nth-child 匹配其父元素下的第N个子或奇偶元素。

nthchild

代码实例:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
        $(document).ready(function(){
            $("ol li:nth-child(5n)").addClass("last");
        })
    </script>
    <style>
        *{ color: #666; text-decoration-line: none;}
        .last a{color: #f00;}
    </style>
    </head>
    <body>
    <ol>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
    </ol>

2、选择的标签加class,其他同级元素标签移除class

removeclass

Select Code
1
2
3
4
5
6
7
8
9
<!-- 
点击的当前li添加class, 其他移除class
-->
<script>
    $("ol li a").click(function(){
        $(this).parents().children().removeClass('last');
        $(this).parent().addClass('last');
    })
</script>

第一次安装nodejs

安装Node环境:

新版本默认已经安装了NPM,NPM 包管理 Node Package Manager
官网:https://nodejs.org/

http://nodejs.cn/
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

测试nodejs安装步骤:

1、测试npm -v
第一次安装nodejs

2、新建D:/test.js文件

Select Code
1
2
3
4
5
6
7
var http = require("http"); 
http.createServer(function(request, response) { 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response.write("test nodjs"); 
response.end(); 
}).listen(8899); 
console.log("nodejs start listen 8899 port!");

3、运行node test.js文件,http://127.0.0.1:8899/即可以访问。
nodejs02

nodejs03

自定义jQuery,理解jQuery核心实现原理

实现核心功能:
1.自定义$(selector)函数,通过$(‘#red’),$(‘.gold’)调用;
2.添加.html,.css, .attr方法;

jQuery优点:
1.隐式迭代(自动循环)
2.完美的链式操作(连贯操作)
3.完美的错误处理(不报错)

自定义jquery代码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 自调函数引入
(function(window){
	window.$ = $;
	window.jQuery = $;	//取别名

	function $(selector)
	{
		var mark = selector.substr(0,1);
		var element = selector.substr(1);

		var obj = [];
		switch(mark){
			case '#':
				obj[0] = document.getElementById(element);
				break;

			case '.':
				obj = document.getElementsByClassName(element);
				break;

			default:
				obj = document.getElementsByTagName(element);
				break;
		}
		console.dir(obj);

		obj.html = function(val)
		{
			if (val === undefined) {
				return obj[0].innerHTML;
			} else{
				for(var i=0; i<obj.length; i++)
				{
					obj[i].innerHTML = val;
				}
			}
			//实现连贯操作
			return this;
		}

		//用于修改style样式的方法
		obj.css = function(key,val)
		{
		    if (val === undefined) {
		        return obj[0].style[key];
		    } else {
		        for (var i=0; i<obj.length; i++) {
		            obj[i].style[key] = val;
		        }
		    }
		    //实现连贯操作
		    return this;
		}

		// 修改属性
		obj.attr = function(key, val)
		{
			if (val === undefined) {
				return obj[0][key];
			} else{
				for (var i = 0; i < obj.length; i++) {
					obj[i][key] = val;
				}
			}
			return this;	//实现连贯操作
		}

		return obj;
	}
}(window));

html:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//**********************html部分代码*************/
	<p>111111111111111111</p>
	<p id="red">111111111111111111</p>
	<p class="gold">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p id="attr" title="获得属性">111111111111111111</p>
	<p title="2222">111111111111111111</p>
	<p title="3333">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>

//**********************js部分代码*************/
<script>
	// 原生js
	// var red = document.getElementById('red');
	// red.style.color = 'red';

	// jQ写法:$('#red').css('color', 'red')
	// $('#red').css('color', 'red');
	$('.gold').css('color', 'red');
	$('#red').html('123');
	// alert($('#red').html());

	// 修改属性
	// alert($('#attr').attr('title'));
	$('#attr').attr('title', '修改属性值');
</script>

源码:https://github.com/webjust/case-study/blob/master/jquery/01custom_my_jquery/js/myjquery.js

图文解析JavaScript如何实现弹弹球效果的过程

弹弹球的最终效果:
03

本文将用图文的方式,解析实现弹弹球效果的关键代码部分。

如表格所示:
弹弹球效果

参数说明:
box.style.top: 小球距离顶部的距离
speed: 表示小球的速度。(speed += 5) 表示小球每次执行操作的时候,速度加5。这从小球每次的speed值可以很直观的看出,不难理解。

关键在于:这里小球距离地面的高度为100px;所以当box.style.top值为100px时,表名小球触地了,这个时候,speed速度值应该反向。

Select Code
1
2
3
4
if(tmp >= 100) {
	speed = -speed;
	tmp = 100;
}

02

举例:小球下落,每次速度加5,到达地面速度为20。这时速度speed值反向,变成-20;然后speed+=5,此时的速度值为-15(负数表示球的运行方向是:向上)。

向上,直到速度变为0,球在上升到最高后,speed值再变为正数,球下落。

01

JS代码如下:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var box = document.getElementById('box');
var timer;
function start()
{
	var speed = 0;
	if (!timer){
		timer = setInterval(function(){
			speed += 5;
			var tmp = parseInt(box.style.top) + speed;
			if(tmp >= 100) {
				speed = -speed;
				tmp = 100;
			}
			box.style.top = tmp + 'px';
			console.log(box.style.top);
			console.log(timer);
		},100);
	}
}

function stop()
{
	clearInterval(timer);
	timer = undefined;
	console.log(timer);
}

完整源代码:https://github.com/webjust/case-study/blob/master/Javascript/002/jump_ball_javascript.html

JavaScript的setInterval()函数写一个来回移动的小球剖析

小球来回移动实现步骤:

小球来回移动1

原理:通过绝对定位,定位小球相对文档的位置,使用left值定位。所以控制小球来回移动,就是(不停的)改变left值的大小。

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

我们假设:小球每秒移动一次,移动到100px然后返回,那么left值的变化过程是(单位是px):

0,10,20,30,40,50,60……100 (每次移动累+10)
然后返回
100……60,50,40,30,20,10,0 (每次移动累-10)

小球来回移动2

Select Code
1
2
3
4
5
6
7
8
9
//每次移动的像素的大小
	step = 10;
	num += step;
	if(num==100 || num==0){
		step = -step;
	}

	//小球的left值
	box.style.left = num + "px";

解释:通过在当num值在最大和最小时,step变为正、负数。而变为累加、累减。

代码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box" style="left:0;"></div>

	var box = document.getElementById('box');
	var num=0;
	var step = 10;
	setInterval(function(){
		//在console面板输出num值
		console.log(num);
		box.style.left = num + "px";
		num += step;
		
		//在title输出num值
		document.title = box.style.left;
		
		if(num==100 || num==0){
			step = -step;
		}
	},1000);