js之單選框判斷身份和h5頁面點擊圖片放大

例：一個系統分為管理員登錄和用戶登錄，不同的身份顯示不同的頁面和加載操作不同的數據庫，登錄前需要點擊單選框指明登陸者身份。

   <input type="radio" name="identity" value="0">管理員</br>
    <input type="radio" name="identity" value="1">用戶</br> 

 判斷哪個選中可以使用偽類

document.querySelector("[name='identity']:checked").value
或者使用jquery  $("[name='identity']:checked").val()

這樣就可以通過返回的0或1判斷身份。

 

h5頁面點擊放大：思路使用通過fixed定位的元素當遮罩層，然后將放大的圖片放在遮罩層上面。點擊遮罩層，遮罩層消失。

首先給遮罩層設置寬高和定位

div.click-enlarge {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

然后編輯js邏輯

　　var imgs = document.querySelectorAll("img");  //獲取點擊需要方法的圖片
    var enlarge = document.querySelector(".click-enlarge");　　　　　　　　　　　　//獲取遮罩層容器
    var clienthight = document.documentElement.clientHeight;　　　　　　　　　　　//獲取屏幕的寬高
    var clientwidth = document.documentElement.clientWidth;
    enlarge.style.width = clientwidth + 'px';　　　　　　　　　　　　　　　　　　　　//使遮罩層鋪滿屏幕
    enlarge.style.height = clienthight + 'px'; 7     imgs.forEach(function(v, i) {　　　　　　　　　　　　　　　　　　　　　　　　　　　//循環獲取的圖片並綁定點擊事件
        imgs[i].onclick = function() {
 9             enlarge.style.display = "block";
            var imgsrc = v.src;
            var newimg = document.createElement("img");
            newimg.src = imgsrc;
            newimg.style.width = '100%';
            newimg.style.position = "absolute";
            newimg.style.top = '30%';
            enlarge.innerHTML = "";
            enlarge.appendChild(newimg);
        }
    });
    enlarge.onclick = function() {
        this.style.display = "none";
    };

個人總結筆記，不是最好卻是實踐，有誤請指正，謝謝！