可以看一下动画

下面是代码

<!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. Hadoop上路-03_Hadoop JavaAPI

    一.Eclipse安装 1.下载解压 下载:http://www.eclipse.org/downloads/ 解压:SHELL$ sudo tar -zxvf eclipse.tar.gz 2.快捷 ...

  2. CentOS 7 最小化安装之后安装Mysql

    启动网卡 验证网络管理器和网卡接口状态 # systemctl status NetworkManager.service # nmcli dev status 修改网卡配置文件 通过上一步可以看到有 ...

  3. 【Hadoop代码笔记】Hadoop作业提交之Child启动map任务

    一.概要描述 在上篇博文描述了TaskTracker启动一个独立的java进程来执行Map或Reduce任务.在本篇和下篇博文中我们会关注启动的那个入口是org.apache.hadoop.mapre ...

  4. nodejs+express +jade模板引擎 新建项目

    先 安装 nodejsiDEAAM 2015/7/16 22:47:25然后安装 npm install expressiDEAAM 2015/7/16 22:47:35然后安装 npm instal ...

  5. google_protobuf数据类型

    要通信,必须有协议,否则双方无法理解对方的码流.在protobuf中,协议是由一系列的消息组成的.因此最重要的就是定义通信时使用到的消息格式. Protobuf消息定义 消息由至少一个字段组合而成,类 ...

  6. gulp之静态资源防缓存处理

    最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...

  7. SpringMVC学习笔记

    1.严格实现MVC设计思想的框架,严格分层,减少耦合: 2.组件(红色必需) 2.1 DispatcherServlet 前端控制器 2.2 Controller 业务控制器 2.3 Handler ...

  8. Delphi异形窗口之PNG

    //1.单元内容 unit UnitAlienForm; interface uses Windows, Forms, Classes, Graphics; //从文件加载PNG procedure ...

  9. PD16 Generate Datebase For Sql2008R2时报脚本错误“对象名sysproperties无效”

    PowerDesinger16创建数据库表到SQL2008R2时,执行报"对象名sysproperties无效"错误. 主要是在建模时我们对表.列增加了些说明注释,而Sql2005 ...

  10. 网络子系统53_ip协议分片重组_内存阈值

    //调用路径:ip_defrag->ip_evictor // 分片重组时,可使用内存上下限: // 1.sysctl_ipfrag_high_thresh 可用内存上限 // 2.sysctl ...