JavaScript案例之电影院电子选票

源码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>ul,li{margin:0;padding:0;list-style: none;}ul{width:560px;border:3px solid #eee;margin:0 auto;}li{width:80px;height:40px;background: #ccc;border:1px solid #abc;float:left;margin:5px;cursor:pointer;}div{width:280px;height:90px;border:1px solid #ccc;margin: 0 auto;text-align: center;line-height: 90px;color:#333;}.click{font-size:10px;text-align:center;line-height: 40px;font-family: '仿宋';font-weight: bold;color:#333;background: orange;border:1px solid red;}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><p style="clear:both;"></p><div>屏幕中央</div></ul><script>// 逻辑：没有click类的时候，进行添加，同时对文本进行赋值；反之，清空click类，同时 文本值为空let lis = document.getElementsByTagName('li');for(let i=0;i<lis.length;i++){lis[i].onclick = function(){let res = this.getAttribute('class');if(!res){this.setAttribute('class','click');this.innerText = '座位已选';}else{this.setAttribute('class','');this.innerText = '';}}}</script>
</body>
</html>

效果图：

JavaScript案例之电影院电子选票相关推荐

HTML+JavaScript案例
HTML: 用户注册: <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
案例分析：电子档把是KANO模型中的反向功能么，以及我们可以怎么做
KANO模型应用在产品创新领域时,里面有一种功能叫做"反向功能",即做得越多用户越不满意.比如对于内容型产品里的广告,越多,用户越反感,但你又不得不做,因为另外一些用户(广告投放者 ...
JavaScript案例之抽奖机
JavaScript案例之抽奖机源码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
JavaScript案例之使用验证码进行简单判断
JavaScript案例之使用验证码进行简单判断源代码: <!DOCTYPE html> <html><head><meta charset="u ...
python自助电影售票机_2019-03-20_面向对象_模拟电影院自动售票机选票[Python练习题]...
题目及要求:在电影院中观看电影是一项很受欢迎的休闲娱乐,现在,请模拟电影院自动售票机中自动选择电影场次的页面,例如,一部电影在当日的播放时间有很多,可以自动选择合适的场次. 模拟电影院自动售票机选票 ...
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
javascript案例练习
案例1.动态显示时间 <div id="div_1"></div> <script type="text/javascript"& ...

JavaScript案例之电影院电子选票

JavaScript案例之电影院电子选票

源码：

效果图：

JavaScript案例之电影院电子选票相关推荐

最新文章

热门文章