1.jQuery简单实现MD5加密的源码方法
2.将以下jq代码转换为原生js
3.前端实战:从零到一实现H5拼图小游戏(附源码)
jQuery简单实现MD5加密的方法
本文实例讲述了jQuery简单实现MD5加密的方法。分享给大家供大家参考，实例具体如下：
1、源码问题背景
有两个输入框，实例一个输入明文，源码另一个输入框显示密文
2、实例内核源码编译目录实现源码
<DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery实现MD5加密</title> <script type="text/javascript" src="js/jquery-1..4.js" ></script> <script type="text/javascript" src="js/jquery.md5.js" ></script> <script> $(function(){ $("#before").blur(function(){ var before = $(this).val(); var beforeVal = $.md5(before); $("#after").val(beforeVal); }); }); </script> </head> <body> <div> <input type="text" id="before" style="width: px;"/><br><br> <input type="text" id="after" style="width: px;"/> </div> </body></html>
3、源码实现结果
附：jquery.md5.js文件本站下载地址。实例
PS：关于加密解密感兴趣的源码朋友还可以参考本站在线工具：
MD5在线加密工具:
/password/CreateMD5Password
迅雷、快车、实例旋风URL加密/解密工具:
/password/urlrethunder
在线散列/哈希算法加密工具:
/password/hash_encrypt
在线MD5/hash/SHA-1/SHA-2/SHA-/SHA-/SHA-3/RIPEMD-加密工具：
/password/hash_md5_sha
在线sha1/sha/sha/sha/sha加密工具：
/password/sha_encode
将以下jq代码转换为原生js
jquery.downCount.js是源码依赖于jQuery的插件（效果：倒计时），所以我们需要查看该插件的实例强者之路脚本源码源码才能将其变成源生代码。html代码：
<div class="p1"><span class="days"></span><span class="days_ref"></span>
<span class="hours"></span><span class="hours_ref"></span>
<span class="minutes"></span><span class="minutes_ref"></span>
<span class="seconds"></span><span class="seconds_ref"></span>
</div>
上面span中的源码class类是用于显示需要的类，在插件中days、实例hours、源码minutes、seconds分别用于显示天数、小时、分钟、秒，days_ref、hours_ref、minutes_ref、女生衣服文字psd源码seconds_ref分别用于显示单位days或day，hours或hour、minutes或minute、seconds或second。这些类都没有定义相应的样式，需要自己自定义样式。
js代码，只是简易的提了出来，如果需要更灵活的配置，自己再做进一步封装：
(function () {var container = document.querySelector(".p1");
var mydate = '1// ::',
myoffset = ,
callback = function () {
alert("执行完毕");
};
/
*** Change client's local date to match offset timezone
* @return { Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();
// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * );
// set new Date object
var new_date = new Date(utc + (*myoffset));
return new_date;
};
/
*** Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(mydate), // set target date
current_date = currentDate(); // get fixed current date
// difference of dates
var difference = target_date - current_date;
// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);
if (callback && typeof callback === 'function') {
callback();
}
return;
}
// basic math variables
var _second = ,
_minute = _second * ,
_hour = _minute * ,
_day = _hour * ;
// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second),
// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days,
hours = (String(hours).length >= 2) ? hours : '0' + hours,
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes,
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';
// set to DOM
document.querySelector('.days').innerHTML = days;
document.querySelector('.hours').innerHTML = hours;
document.querySelector('.minutes').innerHTML = minutes;
document.querySelector('.seconds').innerHTML = seconds;
document.querySelector('.days_ref').innerHTML = ref_days;
document.querySelector('.hours_ref').innerHTML = ref_hours;
document.querySelector('.minutes_ref').innerHTML = ref_minutes;
document.querySelector('.seconds_ref').innerHTML = ref_seconds;
};
// start
var interval = setInterval(countdown, );
})();
前端实战:从零到一实现H5拼图小游戏(附源码)
去年，我开发了一个基于H5、unity枪战游戏大型源码JavaScript和CSS3的拼图小游戏。这款游戏利用了我自己封装的类Jquery框架Xuery，融合了许多经典的JavaScript算法和CSS3特性，对提升大家的编程能力大有裨益。文章末尾将提供源码获取方式，供大家学习体验。
由于这款应用属于H5游戏，为了使项目更轻量，我没有使用第三方UI库。如果大家想使用基于Vue的第三方移动端UI库，我可以推荐几个我之前使用过的易语言网云源码靠谱组件库：[此处省略推荐内容]。以上推荐的都是社区完善、bug较少的组件库，大家可以试试看。
回到我们的小游戏开发，主要考验大家对JavaScript和CSS3的掌握程度。学习完这篇文章后，相信大家对JavaScript和CSS3的编程能力都会有极大的提升。之后，我还会介绍如何使用canvas实现生成战绩海报图的功能。
我们先来看看游戏的预览界面：
本文的算法实现方式在之前的拼拼乐文章中已有说明，这里主要介绍核心算法，至于vue-cli的使用方法，我之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：[此处省略搭建方法]。
关于vue-cli3配置实战，可以参考《一张图教你快速玩转vue-cli3》。
目前，我主要整理了以下核心功能，接下来我会一一为大家实现：实现纯JavaScript上传预览、实现拼图分割功能、实现洗牌算法、实现生成战绩海报功能。
1. 实现纯JavaScript上传预览：文件上传预览主要采用FileReader API实现，原理是将file对象传给FileReader的readAsDataURL，然后转化为data:URL格式的字符串（base编码）以表示所读取文件的内容。具体代码如下：[此处省略代码]。
2. 实现拼图分割功能：一般处理拼图游戏时，我们会采用以下方案：使用canvas分割、采用n张不同的切好的切片（方法简单，但会造成多次请求）、动态背景分割。经过权衡，我选择了一种自认为比较优雅的方法——动态背景分割，只需使用1张，然后利用CSS切割，有点像经典的雪碧图。具体实现如下：[此处省略实现方法]。
3. 实现洗牌算法：洗牌逻辑依托于随机算法，结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。具体实现如下：[此处省略实现方法]。
4. 实现生成战绩海报功能：生成战绩海报我采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲得比较详细。这里我简单实现一个供大家参考：[此处省略实现方法]。
H5拼图小游戏我已在github开源，感兴趣的朋友可以在我github上学习参考。以上逻辑部分的代码可以直接整合到vue项目中，由于实现比较简单，这里我就不详细介绍了。
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。
