HTML CSS JQuery css3 bootstrap实现猫眼电影静态页面

效果图：

jquery判断输入框内是否有内容

简便jquery选座图js

<script>
        function buy(){
           $("#modal1").modal("show");
        }
 
 
        class Swiper {
			constructor() {
				this.w = $('.swiper-item').width();
				this.num = 0;
				this.len = $('.swiper .swiper-item').length - 1;
				this.timer = null;
			}
			init() {
				//设置定时器
				this.setTime();
				//滑上停止定时器
				this.hover();
				//点击指示
				this.pointClick();
				//点击左右箭头
				this.lrClick();
			}
			setTime() {
				this.timer = setInterval(() => {
					this.num++;	
					if (this.num > this.len) {
						this.num = 0;
					}
					let cssTrx = -this.num * this.w;
					$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
					$('.swiper').css({transform: `translateX(${cssTrx}px)`})
				}, 3000)
			}
			hover() {
				$('.swiper-contione').hover(() => {
					clearInterval(this.timer)
				}, () => {
					this.setTime();
				});
			}
			pointClick() {
				let that = this;
				$('.swiper-point-item .point').click(function() {
					that.num = $(this).index();
					let cssTrx = -that.num * that.w;
					$(this).addClass('active').siblings().removeClass('active');
					$('.swiper').css({
						transform: `translateX(${cssTrx}px)`
					})
				})
			}
			lrClick() {
				$('.swiper-left img').click(() => {
					this.num--;
					if (this.num < 0) {
						this.num = this.len;
					};
					console.log(this.num)
					let cssTrx = -this.num * this.w;
					$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
					$('.swiper').css({
						transform: `translateX(${cssTrx}px)`
					})
				});
				
				$('.swiper-right img').click(() => {
					this.num++;
					if (this.num > this.len) {
						this.num = 0;
					}
					let cssTrx = -this.num * this.w;
					$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
					$('.swiper').css({
						transform: `translateX(${cssTrx}px)`
					})
				})
			}
		}
		let sw = new Swiper();
		sw.init();
 
 
        jQuery.expr[':'].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
 
function filterList(list) {
    $('#js-groupId').bind('input propertychange', function() {
        var filter = $(this).val();
        if (filter) {
            $matches = $(list).find('a:Contains(' + filter + ')').parent();
            $('li', list).not($matches).slideUp();
            $matches.slideDown();
        } else {
            $(list).find("li").slideDown();
        }
    });
}
$(function() {
    filterList($("#groupid"));
    $('#js-groupId').bind('focus', function() {
        $('#groupid').slideDown();
    }).bind('blur', function() {
        $('#groupid').slideUp();
    })
    $('#groupid').on('click', 'li', function() {
        $('#js-groupId').val($(this).text())
        $('#groupId').val($(this).data('id'))
        $('#groupid').slideUp()
    });
})
 
        function piao1() {
				$("#modal1").modal("show");
				$(document).ready(function() {
					var $cart = $('#selected-seats1'), //座位区
						$counter = $('#counter1'), //票数
						$total = $('#total1'); //总计金额
 
					var sc = $('#seat-map1').seatCharts({
						map: [ //座位图
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'__________',
							'aaaaaaaa__',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aa__aa__aa'
						],
						naming: {
							top: false,
							getLabel: function(character, row, column) {
								return column;
							}
						},
						legend: { //定义图例
							node: $('#legend1'),
							items: [
								['a', 'available', '可选座'],
								['a', 'unavailable', '已售出']
							]
						},
						click: function() { //点击事件
							if (this.status() == 'available') { //可选座
								$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
									.attr('id', 'cart-item-' + this.settings.id)
									.data('seatId', this.settings.id)
									.appendTo($cart);
								$counter.text(sc.find('selected').length + 1);
								$total.text(recalculateTotal(sc)+price);	
								return 'selected';
							} else if (this.status() == 'selected') { //已选中
								//更新数量
								$counter.text(sc.find('selected').length - 1);
								//更新总计
								$total.text(recalculateTotal(sc) - price);
 
								//删除已预订座位
								$('#cart-item-' + this.settings.id).remove();
								//可选座
								return 'available';
							} else if (this.status() == 'unavailable') { //已售出
								return 'unavailable';
							} else {
								return this.style();
							}
						}
					});
					//已售出的座位
					sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
 
				});
			}
 
         var price = 80; //票价
			function piao() {
				$("#modal").modal("show");
				$(document).ready(function() {
					var $cart = $('#selected-seats'), //座位区
						$counter = $('#counter'), //票数
						$total = $('#total'); //总计金额
 
					var sc = $('#seat-map').seatCharts({
						map: [ //座位图
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'__________',
							'aaaaaaaa__',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aa__aa__aa'
						],
						naming: {
							top: false,
							getLabel: function(character, row, column) {
								return column;
							}
						},
						legend: { //定义图例
							node: $('#legend'),
							items: [
								['a', 'available', '可选座'],
								['a', 'unavailable', '已售出']
							]
						},
						click: function() { //点击事件
							if (this.status() == 'available') { //可选座
								$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
									.attr('id', 'cart-item-' + this.settings.id)
									.data('seatId', this.settings.id)
									.appendTo($cart);
								$counter.text(sc.find('selected').length + 1);
								$total.text(recalculateTotal(sc)+price);	
								return 'selected';
							} else if (this.status() == 'selected') { //已选中
								//更新数量
								$counter.text(sc.find('selected').length - 1);
								//更新总计
								$total.text(recalculateTotal(sc) - price);
 
								//删除已预订座位
								$('#cart-item-' + this.settings.id).remove();
								//可选座
								return 'available';
							} else if (this.status() == 'unavailable') { //已售出
								return 'unavailable';
							} else {
								return this.style();
							}
						}
					});
					//已售出的座位
					sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
 
				});
			}
			//计算总金额
			function recalculateTotal(sc) {
				var total = 0;
				sc.find('selected').each(function () {
					total += price;
				});
						
				return total;
			}
    </script>复制