My front-end notes 01

Posted Jun 15, 20201 min read

  1. The array.find() method is not compatible in low-level browsers, and you can use the for loop instead;

  2. The ios iframe does not support http links, only https links;

  3. The includes() method is not compatible in low-level Android phones, you can use indexOf() instead;

  4. js removes the dom element attribute:

    In some lower versions of ios, dom.style = null or dom.style ='' will report an error;
    Error message:attempt to assign to readonly property

    fix:use removeAttribute;

    Reference URL: http://blog.xuite.net/vexed/tech/21902237-Use +JavaScript+ to overwrite or empty all +element.style+(foreign website)

  1. The css flashes the colored lights through two pictures
    light-2.png ![light-1.png]( https://i0.wp .com/segmentfault.com/img/bVbIo9G "light-1.png")

    , animation:twinkle 1s infinite 1s steps(1, start);

    @keyframes twinkle {

     0%{
         background-image:url('./static/assets/theme/doll/light-1.png');
     }
     50%{
         background-image:url('./static/assets/theme/doll/light-2.png');
     }
     100%{
         background-image:url('./static/assets/theme/doll/light-1.png');
     }

    }

    Reference article address: https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

    , two pictures exist at the same time, respectively set animation animation to control opacity, delay time is different;