实现放大镜功能,增加商品功能,Tab切换功能
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="box">
<div class="left">
<div class="show">
<img src="./img/show_1.jpg" alt="">
<div class="mask"></div>
</div>
<ul>
<li>
<img src="./img/small_1.jpg" alt="">
</li>
<li>
<img src="./img/small_2.jpg" alt="">
</li>
<li>
<img src="./img/small_3.jpg" alt="">
</li>
<li>
<img src="./img/small_4.jpg" alt="">
</li>
</ul>
<div class="bigBox">
<img src="./img/big_1.jpg" alt="">
</div>
</div>
<div class="right">
<h3>伊力特 伊力老窖 46度 整箱装白酒 250ml*10瓶 口感浓香型</h3>
<p class="price"><span>¥</span><b></b></p>
<div class="count">
<input type="button" value="-" class="btn reduce">
<input type="text" value="">
<input type="button" value="+" class="btn add">
</div>
<p class="total"><em>总价 </em><span>¥</span><b></b></p>
<a href="#">加入购物车</a>
</div>
</div>
<div class="loading">
添加成功 在购物车等亲
</div>
<script src="js/utils.js"></script>
<script src="js/index.js"></script>
<script>
new Details()
</script>
</body>
</html>
utils.js
/*
工具类函数
*/
/*
检测一个字符串是否是可回文字符串
@param a 要检测的字符串
@return 返回值是一个布尔值
*/
function fn(a) {
return a.split('').reverse().join('') === a ? true : false
}
/*
求一个范围之间的随机数
@param a 范围下限
@param b 范围上限
@return 范围之间的随机数
*/
function getRandom(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a