标签背景色计算方法(文字确定,背景色就确定)

文字参考
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>



阅读更多

没有更多推荐了,返回首页