可以看一下动画

下面是代码

<!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. oc_转_NSInteger 和 NSNumber

    Objective-C 支持的类型有两种:基本类型和类. 基本类型,如同 C 语言中的 int 类型一样,拿来就可以直接用.而类在使用时,必须先创建一个对象,再为对象分配空间,接着做初始化和赋值.类的 ...

  2. 只有IE能上网，其他浏览器均不可以！

    今天起来,高高兴兴的来到实验室,发现电脑打开上不了网.本人平时喜欢用Chrome,发现上不了网,就开始ping.发现可以ping通,但是网页打不开! 第一反应是DNS的问题,可以发现DNS没问题,能正 ...

  3. fedora 安装python mysql

    如果你服务器环境允许yum,安装MySQL-python模块就很简单了. 如果直接安装不行,先 安装MySQL-devel后正常运行 yum install mysql-devel yum insta ...

  4. Delimiter must not be alphanumeric or backslash 问题及解决

    Warning: preg_match() [function.preg-match]: Delimiter must not be alphanumeric or backslash in 正则表达 ...

  5. 链表逆序(JAVA实现)

    题目:将一个有链表头的单向单链表逆序 分析: 链表为空或只有一个元素直接返回: 设置两个前后相邻的指针p,q,使得p指向的节点为q指向的节点的后继: 重复步骤2,直到q为空: 调整链表头和链表尾: 图 ...

  6. JDBC学习笔记(2)——Statement和ResultSet

    Statement执行更新操作 Statement:Statement 是 Java 执行数据库操作的一个重要方法,用于在已经建立数据库连接的基础上,向数据库发送要执行的SQL语句.Statement ...

  7. HIVE删除表数据

    HIVE只有INSERT,没有UPDATE跟DELETE,所以通过其他的语句产生DETELE效果. 在HDFS上或者本地服务器上新建空的文件XXXXX, 然后执行: LOAD DATA LOCAL I ...

  8. jinfo用法

    jinfo(Configuration Info for Java)的作用是实时地查看和调整虚拟机各项参数.使用jps命令的-v参数可以查看虚拟机启动时显式指定的参数列表,但如果想知道未被显式指定的参 ...

  9. 第十五章 String讲解

    package ch15; import java.util.Scanner; public class Test { public static void main(String[] args) { ...

  10. 如何给word 文章的每段段尾添加 脚注

    新建一个宏,其代码如下 Sub 段尾加脚注() ' ' 段尾加脚注 宏 ' 'ActiveDocument.Paragraphs.Count返回文档的段落数 ' 定义一个整形变量numpara,来存储 ...