2020-08-06 elipse de dibujo en lienzo html + aplicación css fit-content + generación de código de verificación JS + ping de habilidades blandas

2020-08-06 Fuente del tema: http://www.h-camel.com/index.html

[html] Utilice el lienzo para dibujar una elipse.

1.ellipse (x, y, radiusX, radiusY, rotación, startAngle, endAngle, en sentido antihorario)

Punto inicial x. Punto inicial y, radio x, radio y, ángulo de rotación, ángulo inicial, ángulo de resultado, en sentido horario o antihorario

2. La realización de la curva de Bezier es complicada y de baja precisión.

Consulte las 5 formas de dibujar una elipse en el lienzo https://blog.csdn.net/gao xu 520 / article / details / 58588020

[css] Proporcione ejemplos para ilustrar los escenarios de uso de width: fit-conten

css3 propone el valor de atributo adaptativo de widht

1.width: fit-content; indica que el ancho se reducirá al ancho del contenido

2.width: relleno disponible; indica que todo el espacio disponible está lleno, lo que es conveniente para lograr la altura del diseño de contorno: relleno disponible;

3.width: max-content; Indica que el ancho máximo del elemento interno se usa como el ancho del contenedor, por ejemplo, el texto no se ajusta

4.width: min-content; indica que el ancho mínimo del elemento interno se usa como el ancho del contenedor,

[js] Genere aleatoriamente un código de verificación de longitud especificada

Idea: especifique la longitud como longitud, tiempos de duración de bucle y genere un número aleatorio de 0-9a-zA-Z cada vez.

Fuente: https://www.cnblogs.com/kenshinobiy/p/4894792.html

<html>

<head>
    <title>验证码</title>
    <style type="text/css">
        #code {
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            border: 0;
            letter-spacing: 2px;
            color: blue;
            width: 60px;
            height: 24px;
        }
    </style>
</head>

<body onload="createCode()">
    <div>
        <input type="text" id="input" />
        <input type="button" id="code" onclick="createCode()" />
        <input type="button" value="验证" onclick="validate()" />
    </div>

    <script>
        //在全局定义验证码
        var code;

        //产生验证码
        function createCode() {
            code = "";
            var codeLength = 5; //验证码的长度
            var checkCode = document.getElementById("code");
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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'); //随机数
            for (var i = 0; i < codeLength; i++) { //循环操作
                var index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35)
                code += random[index]; //根据索引取得随机数加到code上
            }
            checkCode.value = code; //把code值赋给验证码
        }

        //校验验证码
        function validate() {
            var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
            if (inputCode.length <= 0) { //若输入的验证码长度为0
                alert("请输入验证码!"); //则弹出请输入验证码
            } else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时
                alert("验证码输入错误!@_@"); //则弹出验证码输入错误
                createCode(); //刷新验证码
                document.getElementById("input").value = ""; //清空文本框
            } else { //输入正确时
                alert("^-^"); //弹出^-^
            }
        }
    </script>
</body>

</html>

 

[Habilidades blandas] A menudo usamos el comando ping ¿Conoce su función y principio?

El principio de Ping es el protocolo ICMP, y el nombre completo de ICMP es Intent Control Message Protocol, que proviene del chino como Internet Control Message Protocol;

Artículo de referencia https://blog.csdn.net/zhangyexinaisurui/article/details/82939401

Supongo que te gusta

Origin blog.csdn.net/vampire10086/article/details/108375348
Recomendado
Clasificación