JavaScript作业3
2024-04-22 05:35:38
1、实现全选反选
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function fun(){var chEle = document.getElementsByName("controller")[0];var eleCol = document.getElementsByName("goodsid");for(var i=0;i<eleCol.length;i++){eleCol[i].checked=chEle.checked;}}function fun2(){var eleCol = document.getElementsByName("goodsid");for(var i=0;i<eleCol.length;i++){if(eleCol[i].checked){eleCol[i].checked=false;}else{eleCol[i].checked=true;}}}</script></head><body>全选<input type="checkbox" name="controller" onclick="fun();"/>反选<input type="checkbox" id="controller2" onclick="fun2();"/><div><input type="checkbox" name="goodsid" value="1" />1<input type="checkbox" name="goodsid" value="2" />2<input type="checkbox" name="goodsid" value="3" />3<input type="checkbox" name="goodsid" value="4" />4<input type="checkbox" name="goodsid" value="5" />5 </div></body>
</html>
2、实现抽奖
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head></style>
<body>
<div class="container"><div class="box" id="box"><span id="show">奖品</span></div><button id="start" onclick="start()">开始抽奖</button></div>
</body>
<script>var goods = ["香蕉", "橘子", "八宝粥", "宝马五元代金券", "电脑","iPhoneX", "1QB", "黄钻"];var showspan = document.getElementById("show");var btn = document.getElementById("start");var timer;var flag = false;function start(){if (!flag){flag=true;btn.innerHTML="暂停";timer = setInterval(function (){var i = Math.floor(Math.random()*goods.length);;showspan.innerText = goods[i];},10)}else {flag = false;btn.innerText="开始抽奖";clearInterval(timer);}}</script>
</html>
3、实现购物车
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>table{width: 500px;}</style>
</head>
<body>
<table border="1" onclick="qiuhe()"><tr><td>商品信息</td><td>单价</td><td>数量</td><td>总价</td></tr><tr><td>我和狗狗活下来了</td><td>￥<span class="price">22</span></td><td><input type="button" value="-" onclick="minus(this)"/><input type="text" value="1" class="count"/><input type="button" value="+" onclick="add(this)"/></td><td>￥<span class="sumPrice"></span></td></tr><tr><td>有关雾霾</td><td>￥<span class="price">24</span></td><td><input type="button" value="-" onclick="minus(this)"/><input type="text" value="1" class="count"/><input type="button" value="+" onclick="add(this)"/></td><td>￥<span class="sumPrice"></span></td></tr><tr><td colspan="3">￥<span id="totalPrice"></span></td><td>结算</td></tr>
</table>
</body><script>function minus(ele){var num = ele.nextSibling;if (num.value >=1){num.value -= 1;}else {alert("数量已到0");}qiuhe();}function add(ele){var num = ele.previousSibling;if (num.value >=1){num.value = parseInt(num.value) + 1;}qiuhe();}function qiuhe(){var spanEles = document.getElementsByClassName("sumPrice");var priceEles = document.getElementsByClassName("price");var countsEles = document.getElementsByClassName("count");var all =0;for (var i = 0;i<spanEles.length;i++){var spanEle = spanEles[i];var price = priceEles[i].innerText;var count = countsEles[i].value;spanEle.innerText = parseInt(price)*parseInt(count);all+=parseInt(price)*parseInt(count);}document.getElementById("totalPrice").innerText = all;}qiuhe();
</script>
</html>
4、实现图片轮播
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#adList{position: relative;width: 400px;border: 1px solid green;}#adList img{width: 400px;vertical-align: middle;}#adList ul{overflow: hidden;position: absolute;right: 10px;bottom:10px;}#adList li{float: left;list-style: none;}#adList li a{display: inline-block;width: 20px;height: 20px;border-radius: 10px;background: #fff;text-align: center;line-height: 20px;margin-right: 10px;text-decoration: none;color: black;}#adList li a:hover{background: red;color: #fff;}#adList li .a.normal{background: #fff;color: #000;}#adList li .a_hover{background: red;color: #fff;}</style>
</head>
<body>
<input type="button" onclick="show();" value="点击"/>
<div id="adList"><img src="img/ad1.jpg" id="ad"><ul><li><a href="#" onmouseover="doOver(0)" class="a_hover" onmouseout="doOut()" id="num0">1</a></li><li><a href="#" onmouseover="doOver(1)" onmouseout="doOut()" id="num1">2</a></li><li><a href="#" onmouseover="doOver(2)" onmouseout="doOut()" id="num2">3</a></li></ul>
</div></body>
<script>var n = 0;var timer;function doOut(){timer = setInterval(show,2000);}function show(){huantu(n);n++;if (n==3){n = 0;}}function huantu(n){var a = n+1;var imgEle = document.getElementById("ad");imgEle.src ="img/ad"+a+".jpg";var liE = document.getElementsByTagName("li");for (var i=0;i<liE.length;i++){if (i==n){liE[i].firstElementChild.className="a_hover";}else {liE[i].firstElementChild.className="a_normal";}}}timer = setInterval(show,1000);function doOver(n) {huantu(n);clearInterval(timer);}
</script>
</html>
JavaScript作业3相关推荐
- JavaScript作业4
1.页面中有多张图片,点击图片,自身 添加一个像素灰色的实线边框,内边距10像素,圆角矩形(可以采用多种方式实现 1> .css().css() 2> .css({"border ...
- JavaScript作业：根据圆的半径求周长和面积
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>圆的周 ...
- JavaScript作业1（实验1：Javascript基础语法）
1.判断今年是否闰年. <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 简单贝塞尔曲线实现 - Javascript大作业
贝塞尔曲线: 似乎是在Windows XP的屏幕保护选项里面看到过贝塞尔曲线,一直对这个名字比较感兴趣,刚好最近想起来了便百度了一下. 参考:贝塞尔曲线扫盲 是当时第一次看的,讲的挺通俗易懂的:Wik ...
- JavaScript学习作业-20181011
作业: 一.问答题 1.JavaScript的发展历史? 答: Cmm(C-minus-minus):可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员 ...
- 月中工作总结_在全职工作的9个月中，我是如何从新手转到软件工程师的
月中工作总结 In this post, I'll share how I went from zero(ish) to a six-figure software engineering job o ...
- Kettle构建Hadoop ETL实践（九）：事实表技术
目录 一.事实表概述 二.周期快照 1. 修改数据仓库模式 2. 创建快照表数据装载Kettle转换 三.累计快照 1. 修改数据库模式 2. 修改增量抽取销售订单表的Kettle转换 3. 修改定期 ...
- 现在那个拦截捆绑软件比较好_捆绑您的收件箱以更好地开发
现在那个拦截捆绑软件比较好 by Den McHenry 丹·麦克亨利(Den McHenry) 捆绑您的收件箱以更好地开发 (Bundle-Up Your Inbox to be a Better ...
- 全省首例！大学生瞒着父母出境游遍13国，回国后发热被隔离，处分来了.........
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱 3月11日,一则消息在网上迅速传开:深圳某高校应用外语学院郭姓学生于2020年1月下旬 ...
最新文章
- C 语言 和 C++语言的对比学习 二 数据类型
- 猪八戒网CI/CD最佳实践之路
- 百度计算广告学沙龙学习笔记 - 内容匹配广告
- 破解世界性技术难题！ GTS让分布式事务简单高效
- Django模板继承
- 修改最低版本minSdkVersion（转）
- 解决webserver tcp连接大量CLOSE_WAIT 问题
- 未发现数据源名称_在Power BI中管理数据源Analysis Services
- mybatis学习(35):sql-where
- JAVA shell export_Java 远程调用Shell
- 判断服务是否开启，应用是否安装，并安装应用
- 2021-0(C++)输入一个字符串，判断其是否是回文字符串（回文字符串就是正序与反序是相同的字符串）5-27
- 多层次细节（Level of detail）
- 神经内分泌肿瘤如何分级,神经系统分级调节概念
- Java8：Effectively final
- python 爬取doc文档
- 计算机硬盘对考,两个硬盘对拷（硬盘对刻）图文教程
- Varian OBI几个奇葩之处
- AirtestIDE1.2.13的安卓手机设置自动初始化功能
- Unity Shader之燃烧消散效果