使用JavaScript完成最简单加密解密和模仿QQ的窗口抖动效果 -

BradyZhu

浏览: 246787 次
性别:
来自: 上海

最近访客更多访客>>

yhtppp

Sonicery_D

mf1389004071

liuxiao723846

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-01 ( 34)
2015-12 ( 14)
2015-11 ( 14)
更多存档...

使用JavaScript完成最简单加密解密和模仿QQ的窗口抖动效果

众所周知，在计算机里面，字符串都需要编码，在非英文字符都需要一个专门的编码方式，我们可以利用这种方式来

做一个简单的加密解密小程序。

这里使用JavaScript里面自带的escape函数，这个函数接受一个字符串，然后返回百分号加上Unicode字符集的编

码，然后unescape函数正好相反，就是接受这些乱码，然后翻译成中文。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>最简单的加密与解密</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    	function $(str){
    		return (document.getElementById(str));
    	}
    </script>
  </head>
  
  <body>
    请输入需要加密和解密的内容<br/>
    <textarea rows="10" cols="50" id="txt1"></textarea><br/>
   
    	<input type="button" value="加密" onclick="$('txt2').value=escape($('txt1').value);">
    	<input type="button" value="解密" onclick="$('txt2').value=unescape($('txt1').value);">
  
    结果输出<br/>
    <textarea rows="10" cols="50" id="txt2"></textarea>
    
  </body>
</html>

然后介绍重头戏，模仿窗口抖动特效，直接上代码

<!DOCTYPE html>
<html>
  <head>
    <title>模拟震动闪屏效果</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script type="text/javascript">
   		function resizeWindow(){
   			var windowWidth=240, windowHeight=180;
   			window.moveTo((screen.availWidth-windowWidth)/2, (screen.availHeight-windowHeight)/2);
   			window.resizeTo(windowWidth, windowHeight);
   		}
   		
   		function shakeWin(stepId){
   			var stepId;
   			if(!stepId) stepId=0;
   			switch (stepId) {
			case 0:
				window.moveBy(-5, -5);
				break;
			case 1:
				window.moveBy(10, 0);
				break;
			case 2:
				window.moveBy(-10, 10);
				break;
			case 3:
				window.moveBy(10, 0);
				break;
			case 4:
				window.moveBy(-5, -5);
				break;
			default:
				break;
			}
			stepId++;
			setTimeout("shakeWin("+stepId+")", 20);
   		}
   		
   		window.onload=resizeWindow();
   </script>
  </head>
  	
  <body>
   <input type="button" value="点击查看闪屏效果" onclick="shakeWin();">
  </body>
</html>

大家可以使用IE看效果，貌似只有IE能看效果。JavaScript某些函数还是兼容性有问题

分享到：