jQuery模拟在线选座

最新推荐文章于 2024-05-09 16:43:10 发布

LiXSnow

最新推荐文章于 2024-05-09 16:43:10 发布

阅读量1.3k

点赞数

分类专栏： jQuery 文章标签：在线选座

本文链接：https://blog.csdn.net/lixsnow/article/details/81191777

版权

看了很多关于在线选座的例子，很多都引入了选座插件，而我将要介绍的是不用插件实现的选座功能

首先来看一下效果图
这里写图片描述

分析结构可以把html部分分为四大部分。后两部分采用固定定位的方式，将其固定在底部

jQuery部分写了两个方法，记录用户的操作

    function removeArr(key) {
   
            for(var i=0;i<htmArr.length;i++){
                if(htmArr[i]==key){
                    htmArr.splice(i,1);//移除第i个元素
                }
            }
        }
        function addArr() {
   
            var thisHtml = "";
            for(var i=0;i<htmArr.length;i++){
                thisHtml+="<li>"+htmArr[i]+"</li>"
            }
            $(".adds ul").html(thisHtml);
        }

具体实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background: #0f0f0f;
        }
        .container{
            width: 750px;
            margin: 0 auto;
        }
        .h-date{
            background: #ffffff;
            font-size: 30px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        .h-sign{
            padding: 20px;
            border-bottom: 1px solid #999;
        }
        .h-sign span{
            width: 45px;
            height: 35px;
            color: #ffffff;
            display: inline-block;/*行级块元素 给没有内容的行级元素留出空间  因为行级元素的宽高由内容撑的*/
            font-size:

最低0.47元/天解锁文章

LiXSnow

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
jQuery模拟在线选座

看了很多关于在线选座的例子，很多都引入了选座插件，而我将要介绍的是不用插件实现的选座功能首先来看一下效果图分析结构可以把html部分分为四大部分。后两部分采用固定定位的方式，将其固定在底部jQuery部分写了两个方法，记录用户的操作 function removeArr(key) { for(var i=0;i&lt;htmArr.leng...
复制链接

扫一扫