咸鱼翻身计划——简单的js效果（第一天）咸鱼翻身计划——简单的js效果从一个咸鱼到一个初入程序圈的小白最后成为别人眼

如何制作显示隐藏的密码效果：

<script>
    var btn=document.querySelect('label');
    var pws=document.querySelect('input');
    var flag=0;
    btn.onclick=function(){
        if(flag===0){
            pws.type="text";
            flag=1;
        }esle{
            pws.type="password";
            flag=0;
        }
    }
</script>

如何制作淘宝二维码效果：

<body>
    <div class="box">
        <img src="/image/xxx.png" alt="">
        <i class="close_btn">x</i>
    </div>
</body>
<script>
 var box = document.querySelector(".box");
    var btn = document.querySelector(".close_btn");
    btn.onclick = function () {
        box.style.display = 'none';
    }
</script>

如何实现隐藏文本框的内容:

<style>
    input {
        color: #999;
    }
</style>
<input type="text" value="1111">
</body>
<script>
    // placeholder 获得焦点并输入了才消失
    var text = document.querySelector('input');
    // 获得焦点事件 onfocus
    text.onfocus = function () {
        if (text.value) {
            this.value = "";
        }
        text.style.color = "#333";
    }
    // 失去焦点 onblur
    text.onblur = function () {
        if (text.value === "") {
            text.value = "1111"
        }
        text.style.color = "#999"
    }
</script>

className与element.style的用处场景

如果样式较少或功能简单的情况下使用element.style

而className适用于样式较多或者功能复杂的情况

<style>
   .change{
       xxx:xxx;
   }
</style>
var test=document.querySelector('div');
test.onclick=function(){
    elment.style的使用：
    this.style.xxx
    
    classNamede的使用：
    this.className='change'
}