首页 > 代码库 > javascript 制作的美化select，利用cookie保存选择
javascript 制作的美化select，利用cookie保存选择
可以看一下动画
下面是代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> body{line-height: 40px;font-weight: bold} .container{height:40px;width: 230px;position: relative; margin-top:100px;margin-left: 100px; } .select{height: 40px;width: 200px;border-radius: 6px;background: #61b563 ;padding-left: 20px;position: relative;z-index: 2} .select span{display: block;float: right;height: 40px ;width: 40px; background: #4ea655;border-radius: 6px;} .select::after{content: ‘‘;width: 0;height: 0;border: 10px solid transparent;border-top-color: white;position: absolute; right: 10px;top: 15px;} .select::before{content: ‘‘;display: block;width: 5px;height: 40px;position: absolute;right: 40px;background:linear-gradient(-90deg,#4ea655, #61b563 )} .ul{height: 240px;width: 230px;padding-left: 10px;background:#61b563;border-radius: 6px;margin: 0;position: absolute;top: 40px;z-index: 1;opacity: 0;transition: all 0.8s} .ul1{opacity: 1;top: 60px} .ul::before{content: ‘‘;width: 0;height: 0;border: 10px solid transparent;border-bottom-color:#61b563 ;position: absolute;right: 30px; top:-20px;} .ul li{list-style: none;display: block;height: 30px;width: 220px;box-sizing: border-box;margin-top:8px;margin-bottom: 5px;;text-indent: 24px ;position: relative;line-height: 30px } .ul li:hover{background: #4ea655;transition: all .7s} </style></head><body> <div class="container"> <div class="select"> <a>请选择</a> <span></span> </div> <ul class="ul"> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> <li>重庆</li> <li>西安</li> </ul> </div> <script> var container=document.querySelector(‘.container‘); var select=document.querySelector(‘.select‘); var ul=document.querySelector(‘.ul‘); var li=document.querySelectorAll(‘ul li‘); var text=document.querySelector(".select a"); ul.onclick=function(){ event.stopPropagation(); }; select.onclick=function(){ event.stopPropagation(); if(ul.className=="ul"){ ul.className+=" ul1" container.style.height=‘300px‘; }else {ul.className="ul"} }; window.onclick=function(){ ul.className="ul"; }; for(var i=0;i<li.length;i++){ li[i].p=i; li[i].onclick=function(){ text.innerText=this.innerText; for(var j=0;j<li.length;j++){ li[j].style.background=‘#61b563‘; li[j].style.color=‘black‘; } var t=new Date(‘2017-09-09‘).toUTCString(); document.cookie=‘option=‘+this.innerText+";expires="+t; document.cookie=‘index=‘+this.p+";expires="+t; } } var T1=setInterval(reload,50); function reload(){ var cookies=document.cookie.split(‘;‘); var c1=cookies[0].split(‘=‘); var c2=cookies[1].split(‘=‘); text.innerText=c1[1]; li[c2[1]].style.color=‘white‘; li[c2[1]].style.background=‘ #4ea655‘; } </script></body></html>
javascript 制作的美化select，利用cookie保存选择
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。