html水波纹样式,源码直接下载,代码有注释教程,小白可以看懂。

动画啥的都做好了,效果我觉得还不错

网上文章看到xbox 工程师使用隐写术,在界面的右下角放上了含有用户激活码的水波纹样式,一般人还真看不出来。

于是仿制了一个

先把莫尔兹转码部分放上来吧,莫尔兹转换部分是网上某位大佬写的,照抄。

完整代码下载在最后边

var utils = utils || {};

utils.isArray = function(value) {
return Object.prototype.toString.apply(value) === '[object Array]';
} utils.trim = function(value) {
return value.trim ? value.trim() : value.replace(/^\s+|\s+$|/g,'');
} // 解决IE不兼容console问题
var console = console || {};
console.log = console.log || function(){};
console.error = console.error || function(){}; // 使用字典存储摩斯码对照关系
function Dictionary() {
this.datasource = {};
this.rdatasource = {};
} Dictionary.prototype.add = function(keys, values) {
if(typeof keys === 'undefined' || typeof values === 'undefined') {
console.error('Illegal arguments');
return ;
}
if(utils.isArray(keys) && utils.isArray(values)) {
if(keys.length != values.length) {
console.error('keys length not equals values length');
return ;
}
for(var i = 0; i < keys.length; i++) {
this.datasource[keys[i]] = values[i];
}
return ;
}
this.datasource[keys] = values;
} Dictionary.prototype.reversal = function(){
var tempData = this.datasource;
for(var i in tempData) {
if(tempData.hasOwnProperty(i)) {
this.rdatasource[tempData[i]] = i;
}
}
} Dictionary.prototype.showAll = function(values) {
var count = 0;
console.log('-----------morse code mapping-----------');
for(var i in values) {
if(values.hasOwnProperty(i)) {
count++;
console.log(i + '\t > ' + values[i]);
}
}
console.log('total count: ' + count);
} // morse code library
var morse = (function(global){
var mcode = {},
r_special = /\<\w+\>/g,
r_find = /^\<(\w+)\>$/; // store datas mapping
mcode.mdatas = (function(){
var dictionaryDS = new Dictionary();
// initial mappping
dictionaryDS.add(
[
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'1','2','3','4','5','6','7','8','9','0',
'AA','AR','AS','BK','BT','CT','SK','SOS',
'.',':',',',';','?','=',"'",'/','!','-','_','"','(',')','$','&','@','+'
],
[
// letter
'.-','-...','-.-.','-..','.','..-.','--.','....','..','.---','-.-','.-..','--','-.','---','.--.','--.-','.-.','...','-','..-','...-','.--','-..-','-.--','--..',
// number
'.----','..---','...--','....-','.....','-....','--...','---..','----.','-----',
// special charactor
'.-.-','.-.-.','.-...','-...-.-','-...-','-.-.-','...-.-','...---...',
// punctuation
'.-.-.-','---...','--..--','-.-.-.','..--..','-...-','.----.','-..-.','-.-.--','-....-','..--.-','.-..-.','-.--.','-.--.-','...-..-','.-...','.--.-.','.-.-.'
]
);
return dictionaryDS;
}()); // error flag
mcode.error_flag = false; // 将字符串转换为摩斯码
mcode.parse = function(values) {
// console.log('input: ' + values);
this.error_flag = false; var _datasource = this.mdatas.datasource,
item = '',
a_special = [],
a_temp = [],
a_value = [],
count = 0,
result = '';
values = values.toUpperCase();
a_special = values.match(r_special);
a_temp = values.split(r_special); // 将用户输入的字符串转换成数组
for(var i=0; i<a_temp.length; i++) {
item = a_temp[i];
if(item !== '') {
// IE无法通过下标来索引字符串
if(!item[0]){
item = item.split('');
}
for(var j=0; j<item.length; j++) {
a_value[count++] = item[j];
}
} // 当前字符串为<AS>形式,提取AS字符
if(i !== a_temp.length - 1){
a_value[count++] = a_special[i].match(r_find)[1];
}
} // 将解析数组形式的用户输入值
for(var i=0; i<a_value.length; i++) {
item = a_value[i]; if(item === ' ') {
result += '/ ';
} else if(typeof _datasource[item] === 'undefined') {
this.error_flag = true;
// console.error('Invalid characters in input.')
result += '? ';
}else {
result += _datasource[item] + ' ';
}
}
return utils.trim(result);
} //将摩斯码转换成字符串
mcode.decode = function(values) {
// console.log('input: ' + values);
this.error_flag = false; this.mdatas.reversal();
var _rdatasource = this.mdatas.rdatasource,
a_input = values.split(' '),
result = '',
item = '',
c_result = ''; for(var i=0; i<a_input.length; i++) {
item = a_input[i];
if(item === '/') {
result += ' ';
}else {
c_result = _rdatasource[item];
if(typeof c_result === 'undefined') {
this.error_flag = true;
// console.error('Invalid characters in input.')
result += '?';
} else {
if(c_result.length > 1){
result += '<' + c_result + '>';
} else {
result += c_result;
}
}
}
}
return result;
} return mcode;
}(this));

百度云下载

链接:https://pan.baidu.com/s/1za3NLi8a7ebJuEExb10HdA
提取码:hsv5

最新文章

  1. 闲聊——浅谈前端js模块化演变
  2. 保护眼睛(ubuntu 和 chrome)
  3. 【CISP笔记】操作系统安全
  4. Android权限机制
  5. 用code workshop取代code review
  6. OC - 10.使用Quartz2D绘制个性头像
  7. source insight3.5中文乱码解决方案
  8. C++ 字符串字面值
  9. Quartz总结(三):动态修改定时器一
  10. 对于是否在一个python程序中编写函数的启发
  11. 使用MFC创建C++程序
  12. net应用程序池自动关闭的解决方法
  13. java+Selenium+TestNg搭建自动化测试架构(2)实现跨浏览器功能
  14. IIS 网站 HTTP 转 HTTPS
  15. 八、UIViewController们之间的协作——Segue
  16. OpenCV——轮廓填充drawContours函数解析
  17. 在现实面前,IT从业者的无奈
  18. redis(二)--用Redis作MySQL数据库缓存
  19. 推荐一些好的linux学习网站
  20. Centos 7 MariaDB Galera cluster 部署

热门文章

  1. ReentrantLock——可重入锁的实现原理
  2. Collection,泛型,Map
  3. Linux Shell 基础知识(一)
  4. centos7 下安装mysql5.7 数据库并使用nevicat连接数据库
  5. 为什么Kubernetes使用Pod作为最小调度单元
  6. 模板引擎Velocity学习系列-#set指令
  7. Spring IOC MVC DI简单实现
  8. 百度脑图-离线版(支持Linux、Mac、Win)
  9. Mysql高手系列 - 第13篇:细说NULL导致的神坑,让人防不胜防
  10. 3D 飞行器航迹规划