标签存档: Jquery - 第2页

Node.js 回调函数

Node.js 异步编程的直接体现就是回调。

异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了。

回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数。

例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回。这样在执行代码时就没有阻塞或等待文件 I/O 操作。这就大大提高了 Node.js 的性能,可以处理大量的并发请求。

阻塞代码实例:

创建一个文件 input.txt ,内容如下:

今天自学Node.js

创建 main.js 文件, 代码如下:

var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("程序执行结束!");

以上代码执行结果如下:

$ node main.js
今天自学Node.js
程序执行结束!

非阻塞代码实例:

创建 main.js 文件, 代码如下:

var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
        if (err) return console.error(err);
        console.log(data.toString());
    });
console.log("程序执行结束!");

以上代码执行结果如下:

$ node main.js
今天自学Node.js
程序执行结束!

以上两个实例我们了解了阻塞与非阻塞调用的不同。第一个实例在文件读取完后才执行完程序。 第二个实例我们不需要等待文件读取完,这样就可以在读取文件时同时执行接下来的代码,大大提高了程序的性能。

因此,阻塞是按顺序执行的,而非阻塞是不需要按顺序的,所以如果需要处理回调函数的参数,我们就需要写在回调函数内。

JS热键键值及应用

字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 109 F6 117 F12 123
6 102 . 110
7 103 / 111

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up A

应用:屏蔽按键或按键组合

function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页!"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页!"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }

JS放大缩略图并随鼠标移动

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    		

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标,并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg