Label background color calculation method (the text is determined, the background color is determined)

Text referencehttp
://www.cnblogs.com/Jackson-Bruce/p/4011733.html

Requirement: The user enters different text, and randomly displays 3 different background colors (for example: the background color of "happy" is green, then it is required that in all pages, the background color of the "happy" label is green)

Ideas:

Use an encryption method (hash, SHA-1) for the input text, the output results are consistent, and then obtain part of the string in the encrypted result and convert it into a number, then calculate the remainder, and then specify an array (enumeration), The difference is that the results show different values

<!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 encryption
</button>

<br>
<br>

<button onclick="SHA()">
    SHA-1 encryption
</button>

<br>
<br>

<button onclick="base64()">
    base64 encryption
</button>
<br>
<br>
<button onclick="calcColor()">
    Calculate color
</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();
		// Get the 3 strings after the 5th bit of the encrypted result
        var subStr = inputValueMd5.substr(5,3);
        console.log(subStr);
        // Convert hexadecimal data to decimal
        var resultNumber = parseInt(subStr, 16);
        console.log(resultNumber);
        console.log(resultNumber%3);
    }


</script>
</body>
</html>

Label background color calculation method (the text is determined, the background color is determined)

Guess you like