js之单选框判断身份和h5页面点击图片放大

例：一个系统分为管理员登陆和用户登陆，不一样的身份显示不一样的页面和加载操做不一样的数据库，登陆前须要点击单选框指明登录者身份。

1    <input type="radio" name="identity" value="0">管理员</br>
2     <input type="radio" name="identity" value="1">用户</br>

 判断哪一个选中能够使用伪类

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

这样就能够经过返回的0或1判断身份。

 

h5页面点击放大：思路使用经过fixed定位的元素当遮罩层，而后将放大的图片放在遮罩层上面。点击遮罩层，遮罩层消失。

首先给遮罩层设置宽高和定位

1 div.click-enlarge {
2  position: fixed;
3  top: 0;
4  left: 0;
5  z-index: 9999;
6  background-color: rgba(0, 0, 0, 0.8);
7  display: none;
8 }

而后编辑js逻辑

 1 　　var imgs = document.querySelectorAll("img"); //获取点击须要方法的图片  2     var enlarge = document.querySelector(".click-enlarge");　　　　　　　　　　　　//获取遮罩层容器  3     var clienthight = document.documentElement.clientHeight;　　　　　　　　　　　//获取屏幕的宽高  4     var clientwidth = document.documentElement.clientWidth;  5     enlarge.style.width = clientwidth + 'px';　　　　　　　　　　　　　　　　　　　　//使遮罩层铺满屏幕  6     enlarge.style.height = clienthight + 'px'; 7     imgs.forEach(function(v, i) {　　　　　　　　　　　　　　　　　　　　　　　　　　　//循环获取的图片并绑定点击事件  8         imgs[i].onclick = function() { 9             enlarge.style.display = "block"; 10             var imgsrc = v.src; 11             var newimg = document.createElement("img"); 12             newimg.src = imgsrc; 13             newimg.style.width = '100%'; 14             newimg.style.position = "absolute"; 15             newimg.style.top = '30%'; 16             enlarge.innerHTML = ""; 17  enlarge.appendChild(newimg); 18  } 19  }); 20     enlarge.onclick = function() { 21         this.style.display = "none"; 22     };

我的总结笔记，不是最好倒是实践，有误请指正，谢谢！