文字参考
http://www.cnblogs.com/Jackson-Bruce/p/4011733.html
需求: 用户输入不同的文字,随机显示3中不同的背景色(例如:“高兴”的背景色是绿色,则要求在所有的页面中,"高兴"标签的背景色就是绿色)
思路:
对输入的文字使用一种加密方式(hash,SHA-1),输出的结果是一致的,然后获取加密结果中的部分字符串转为数字,然后求余数,然后指定一个数组(枚举),不同是结果显示不同的值
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>contenteditable div编辑</title> <link href="../../css/lib/bootstrap.css" rel="stylesheet"> <link href="../../css/hb_pc.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <input id="userinput"><span id="encryption"></span> <br> <br> <button onclick="MD5()"> MD5 加密 </button> <br> <br> <button onclick="SHA()"> SHA-1 加密 </button> <br> <br> <button onclick="base64()"> base64 加密 </button> <br> <br> <button onclick="calcColor()"> 计算颜色 </button> <script src="../../js/lib/jquery.min.js"></script> <script src="../../js/lib/encrypt/HashEncrypt.min.js"></script> <script type="text/javascript"> function MD5(){ var userinputValue = $("#userinput").val(); var encryptionValue = userinputValue.md5(); $("#encryption").html(encryptionValue); } function SHA(){ var userinputValue = $("#userinput").val(); var encryptionValue = userinputValue.sha1(); $("#encryption").html(encryptionValue); } function base64(){ var userinputValue = $("#userinput").val(); var encryptionValue = userinputValue.base64(); $("#encryption").html(encryptionValue); } function calcColor(){ var inputValueMd5 = $("#userinput").val().md5(); // 获取加密结果的第5位后面的3个字符串 var subStr = inputValueMd5.substr(5,3); console.log(subStr); // 将16进制数据转为10进制 var resultNumber = parseInt(subStr, 16); console.log(resultNumber); console.log(resultNumber%3); } </script> </body> </html>