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

最新推荐文章于 2021-06-26 23:55:23 发布

胖鹅68

最新推荐文章于 2021-06-26 23:55:23 发布

阅读量846

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/54172072

版权

文字参考
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 οnclick="MD5()">
    MD5 加密
</button>

<br>
<br>

<button οnclick="SHA()">
    SHA-1 加密
</button>

<br>
<br>

<button οnclick="base64()">
    base64 加密
</button>
<br>
<br>
<button οnclick="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>