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的插件（效果：倒计时），所以我们需要查看该插件的实例c 翻译源码源码才能将其变成源生代码。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、junit源码包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、rdd intersection 源码JavaScript和CSS3的拼图小游戏。这款游戏利用了我自己封装的类Jquery框架Xuery，融合了许多经典的JavaScript算法和CSS3特性，对提升大家的编程能力大有裨益。文章末尾将提供源码获取方式，供大家学习体验。
由于这款应用属于H5游戏，为了使项目更轻量，我没有使用第三方UI库。如果大家想使用基于Vue的第三方移动端UI库，我可以推荐几个我之前使用过的toggle源码 仙剑靠谱组件库：[此处省略推荐内容]。以上推荐的都是社区完善、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数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。
