可以看一下动画

下面是代码

<!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保存选择的更多相关文章

  1. 利用Cookie保存用户身份信息实现免登录

    <%@page import="sun.misc.BASE64Encoder"%> <%@page import="java.util.Base64.E ...

  2. 利用COOKIE保存历史浏览商品的一个简单思路

    <?php //如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号 ...

  3. 如何利用cookie来保存用户登录账号

    众所周知,cookie在网页编写中不接或缺,今天就谈谈如何利用cookie技术来保存用户登录账号 1.首先是否保存用户登录账号当然是用户自行决定,所以我们需要在用户登录界面设置一个复选框,以此取得用户 ...

  4. JavaWeb利用cookie记住账号

    JavaWeb利用cookie记住账号. 首先,来看看界面什么样子. 记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中. 材料准备 <script src="${ct ...

  5. 利用 cookie 模拟网站登录

    import urllib import urllib2 import cookielib filename = 'cookie.txt' \#声明一个MozillaCookieJar对象实例来保存c ...

  6. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  7. Servlet 利用Cookie实现一周内不重复登录

    import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import ...

  8. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  9. jquery美化select，自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. 读《HTML5与CSS3权威指南（上册）》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  2. The Services（服务）

    datastore和运行时环境的关系就是和一个服务的关系:应用使用API访问一个独立的系统(separate system),这个系统管理应用的所有的独立于应用实例的扩展需求(scaling need ...

  3. 由浅入深探究mysql索引结构原理、性能分析与优化

    摘要: 第一部分:基础知识 第二部分:MYISAM和INNODB索引结构 1.简单介绍B-tree B+ tree树 2.MyisAM索引结构 3.Annode索引结构 4.MyisAM索引与Inno ...

  4. MLlib 中的聚类和分类

    聚类和分类是机器学习中两个常用的算法,聚类将数据分开为不同的集合,分类对新数据进行类别预测,下面将就两类算法进行介绍. 1. 聚类和分类(1)什么是聚类 聚类( Clustering)指将数据对象分组 ...

  5. POJ 3660 Cow Contest （Floyd）

    http://poj.org/problem?id=3660 题目大意:n头牛两两比赛经过m场比赛后能判断名次的有几头可转 化为路径问题,用Floyd将能够到达的路径标记为1,如果一个点能 够到达剩余 ...

  6. I - Control - HDU 4289 （最大流）

    题意:有N个城市,现在城市S出现了一伙歹徒,他们想运送一些炸弹到D城市,不过警方已经得到了线报知道他们的事情,不过警察不知道他们所在的具体位置,所以只能采取封锁城市的办法来阻断暴徒,不过封锁城市是需要 ...

  7. PC 端微信扫码注册和登录

    一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...

  8. 部署 instance 到 OVS flat network - 每天5分钟玩转 OpenStack（135）

    上一节创建了 OVS flat network,今天我们部署 instance 并验证 flat 网络的连通性. launch 新的 instance "cirros-vm1",网 ...

  9. 【Java】多线程冲突解决——同步锁

       转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5827547.html    解决并行冲突最有效的方法就是加同步锁,主要有以下几种方法:   1:动态方法 ...

  10. GUI图形界面

    一.界面元素 1.首层容器:Jwindow.JFrane(窗体).JDialge(对话框).JApplet. 2.组件:标签.文本框.密码框.按钮.下拉列表.单选框.复选框.文本域等 注:标签JLab ...