1、实现全选反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ><center>
全选<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></center>
</body>
</html>
jsp片段:
<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>
2、实现抽奖
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">
奖品
</span>
</div>
<button id="start" onclick="start()">开始抽奖</button>
</div>
</body>
</html>
css:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
border: 1px dashed red;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.container .box, .box2 {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background: deepskyblue;
}
#show {
font-size: 30px;
color: white;
font-weight: bold;
}
#start {
width: 300px;
height: 50px;
background: palevioletred;
}
</style>
jsp:
<script type="text/javascript">
var goods= ["A", "B", "C", "D", "E",
"X", "S", "H"];
var showspan = document.getElementById("show");
var btn = document.getElementById("start");
var timer;
function start(){
var btnText = btn.innerText;
if(btnText=='开始抽奖'){
btn.innerText='暂停';
timer = setInterval(function(){
var index= Math.floor(Math.random()*goods.length);//0-1,不包含1
showspan.innerText = goods[index];
},100);
}else{
clearInterval(timer);
btn.innerText='开始抽奖';
}
}
</script>
3、实现购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 500px;
}
</style>
</head>
<body><center>
<table border="1">
<tr>
<td>序号</td>
<td>商品信息</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>1</td>
<td>
iphone 8
</td>
<td>
¥<span class="price">5899</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>2</td>
<td>
iphone xs
</td>
<td>
¥<span class="price">8999</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>
</center>
</body>
</html>
<script>
function minus(ele){
var inputEle = ele.nextSibling;
var val = inputEle.value;
if(val==1){
alert('不能再减');
}else{
inputEle.value=parseInt(val)-1;
}
cal();
}
function add(ele){
var inputEle=ele.previousSibling;
var val = inputEle.value;
inputEle.value=parseInt(val)+1;
cal();
}
function cal(){
var spanEles = document.getElementsByClassName("sumPrice");
var priceEles = document.getElementsByClassName("price");
var countEles = 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 = countEles[i].value;
spanEle.innerText=parseFloat(price)*parseInt(count);
all+=parseFloat(price)*parseInt(count);
}
document.getElementById("totalPrice").innerText=all;
}
cal();
</script>
4、实现图片轮播
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<input type="button" onclick="show();" value="点击"/>
<div id="adList">
<img src="img/a1.jpg" id="a"/ >
<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>
<li><a href="#" onmouseover="doOver(3)" onmouseout="doOut()" id="num3">4</a></li>
</ul>
</div>
</body>
</html>
CSS:
<style>
*{
margin: 0;
padding: 0;
}
#adList{
position: relative;
width: 300px;
border: 1px solid green;
}
#adList img{
width: 300px;height:300px ;
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_nomal{
background: #fff;
color: #000;
}
#adList li .a_hover{
background: red;
color: #fff;
}
</style>
jsp:
<script>
var index=0;
var timer;
function doOut(){
timer = setInterval(show,2000);
}
function show(){
showPic(index);
index++;
if(index==3){
index=0;
}
}
function showPic(n){
index=n;
var pn = n+1;
var imgEle = document.getElementById("a");
imgEle.src="img/a"+pn+".jpg";
var liEles = document.getElementsByTagName("li");
for(var i=0;i<liEles.length;i++){
if(i==n){
liEles[i].firstChild.className="a_hover";
}else{
liEles[i].firstChild.className="a_normal";
}
}
}
timer = setInterval(show,1000);
function doOver(n){
showPic(n);
clearInterval(timer);
}
</script>