一键换肤

需要更改背景的图片
前端index.html
css样式文件
js触发文件

实例：

1.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>
</head>
<link rel="stylesheet" href="static/css/style.css">
<body>
   <div class="container">
       <img src="static/image/1.jfif" alt="">
       <img src="static/image/2.jfif" alt="">
       <img src="static/image/3.jfif" alt="">
   </div>
  <script src="static/js/yjhf.js"></script>
</body>
</html>

css 样式文件

.container
{
    width: 300px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 10px;
}
.container > img
{
    width: 100%;
    border: 3px solid #fff;
    opacity: 0.5;
}
.container >img:hover
{
    opacity: 1;
    cursor: pointer;
    width: 105%;
}
body
{
    background-image: url("../image/1.jfif");
    background-repeat: no-repeat ;
}

js触发文件


document.querySelector(".container").addEventListener("click",setSkin,false);
//添加div的点击事件->调用setSkin函数
function setSkin(ev)
{
    document.body.style.backgroundImage = "url("+ ev.target.src +")";
    //将点击的图片设置给body的背景图片
}

更改鼠标移动和移出的tr的样式

index.html 前端文件
style.css 前端样式文件
js.js 触发js设置文件
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>表格隔行变色</title>
<link rel="stylesheet" href="static/css/change-line-color.css">
</head>
<body>
    <table>
        <caption>
          员工信息表
        </caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>手机</th>
            <th>邮箱</th>
            <th>部门</th>
            <th>职位</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>杨过</td>
            <td>28</td>
            <td>男</td>
            <td>1890***655</td>
            <td>123@qq.com</td>
            <td>市场部</td>
            <td>销售员</td>
          </tr>
          <tr>
            <td>2</td>
            <td>小龙女</td>
            <td>28</td>
            <td>女</td>
            <td>1390***755</td>
            <td>13323@qq.com</td>
            <td>开发部</td>
            <td>鼓励师</td>
          </tr>
          <tr>
            <td>3</td>
            <td>李莫愁</td>
            <td>38</td>
            <td>女</td>
            <td>1359***222</td>
            <td>1909023@qq.com</td>
            <td>市场部</td>
            <td>部长</td>
          </tr>
          <tr>
            <td>4</td>
            <td>尹志平</td>
            <td>24</td>
            <td>男</td>
            <td>1889***882</td>
            <td>3898023@qq.com</td>
            <td>总经办</td>
            <td>保洁</td>
          </tr>
          <tr>
            <td>5</td>
            <td>欧阳克</td>
            <td>39</td>
            <td>男</td>
            <td>1399***882</td>
            <td>4678933@qq.com</td>
            <td>开发部</td>
            <td>部长</td>
          </tr>
        </tbody>
      </table>
      <script src="static/js/change-line-color.js"></script>
</body>
</html>

css文件

table {
  border: 1px solid #000;
  border-collapse: collapse;
  margin: 30px auto;
  text-align: center;
  width: 90%;
}
table caption {
  font-size: 1.2rem;
  margin-bottom: 15px;
}
th,
td {
  border: 1px solid #000;
  padding: 5px;
}
table thead tr:first-of-type {
  background-color: #ddd;
}
.active {
  background-color: lightcyan;
}
/* 加点css也能实现 
table tbody tr:hover {
  background-color: rgb(95, 164, 255);
}
*/

js文件

var tbody = document.querySelector('tbody');
tbody.addEventListener('mousemove',addBgColor,false);
tbody.addEventListener('mouseout',removeBgColor),false;
//点击Tbody的事件
function addBgColor(ev)
{
     ev.target.parentNode.classList.add("active");
     //点击td后添加tr的样式
}
function removeBgColor(ev)
{
    ev.target.parentNode.classList.remove("active");
    //移出td后清除tr的样式
}

-可以使用css简单修改，注释的css代码可以实现此功能。

购物车自动计算

index.html 前端
check-all.js 处理的js
check.all.css 前端的css

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车全选</title>
    <link rel="stylesheet" href="static/css/check-all.css" />
  </head>
  <body>
    <table>
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              name="checkAll"
              id="check-all"
              checked
            /><label for="check-all">全选</label>
          </th>
          <th>ID</th>
          <th>品名</th>
          <th>单位</th>
          <th>单价/元</th>
          <th>数量</th>
          <th>金额/元</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="itemId" value="SN-1020" checked />
          </td>
          <td>SN-1010</td>
          <td>MacBook Pro电脑</td>
          <td>台</td>
          <td>18999</td>
          <td>1</td>
          <td>18999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="itemId" value="SN-1020" checked />
          </td>
          <td>SN-1020</td>
          <td>iPhone手机</td>
          <td>部</td>
          <td>4999</td>
          <td>2</td>
          <td>9998</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="itemId" value="SN-1030" checked />
          </td>
          <td>SN-1030</td>
          <td>智能AI音箱</td>
          <td>只</td>
          <td>399</td>
          <td>5</td>
          <td>1995</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="itemId" value="SN-1040" checked />
          </td>
          <td>SN-1040</td>
          <td>SSD移动硬盘</td>
          <td>个</td>
          <td>888</td>
          <td>2</td>
          <td>1776</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="itemId" value="SN-1050" checked />
          </td>
          <td>SN-1050</td>
          <td>黄山毛峰</td>
          <td>斤</td>
          <td>999</td>
          <td>3</td>
          <td>2997</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总计:</td>
          <td>13</td>
          <td>35765</td>
        </tr>
      </tfoot>
    </table>
    <div style="width: 90%; margin: 10px auto;">
      <button style="float: right; width: 100px;">结算</button>
    </div>
    <script src="static/js/check-all.js""></script>
  </body>
</html>

check-all.js


// 商品数量: 数组
var counts = [];
// 商品金额: 数组
var amounts = [];
// 商品单价: 数组
var unitPrices = [];
// 商品总数量
var totalNum = 0;
// 商品总金额
var totalAmount = 0;
// 获取商品数量控件<input:number>
var numbers = document.querySelectorAll("input[type=number]");
// 获取所有商品单价
var prices = document.querySelectorAll("tbody > tr > td:nth-of-type(5)");
// 1. 生成商品数量: 数组
counts = getCounts(numbers);
function getCounts(numbers) {
  // Array.from(numbers): 将类数组,转为真正数组
  // map()与forEach()功能相同, 只不过他返回一个新数组
  return Array.from(numbers).map(function (item) {
    return parseInt(item.value);
  });
}
console.log(counts);
// 2. 商品单价: 数组
unitPrices = getUnitPrices(prices);
function getUnitPrices(prices) {
  return Array.from(prices).map(function (item) {
    return parseInt(item.innerText);
  });
}
console.log(unitPrices);
// 3. 计算每个商品的金额
amounts = getEveryAmount(counts, unitPrices);
function getEveryAmount(counts, unitPrices) {
  var result = [];
  for (var i = 0; i < unitPrices.length; i++) {
    // 金额 = 单价 * 数量
    amount = unitPrices[i] * counts[i];
    // 将这个商品金额添加到金额数组中
    result.push(amount);
  }
  return result;
}
console.log(amounts);
// 将每个商品金额渲染到页面中
var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
// forEach(function (value,[ key, array]))
subtotal.forEach(function (sub, index) {
  sub.innerHTML = amounts[index];
});
// 4. 计算数量总和
totalNum = numTotal(counts);
// reduce()归并,最终将所有数组元素累加成一个值返回
function numTotal(counts) {
  return counts.reduce(function (prev, next) {
    return (prev += next);
  }, 0);
}
console.log(totalNum);
// 将数量之和添加到页面中
document.getElementById("total-num").innerText = totalNum;
// 5 计算所有商品总额
totalAmount = getTotalAmount(amounts);
function getTotalAmount(amounts) {
  return amounts.reduce(function (prev, next) {
    return (prev += next);
  }, 0);
}
console.log(totalAmount);
// 将总金额添加到页面中
document.getElementById("total-amount").innerText = totalAmount;
// 6. 给每个数量控件添加change事件
numbers.forEach(function (item) {
  item.addEventListener("change", autoCalculate, false);
});
function autoCalculate(ev) {
  // 更新总数量
  counts = getCounts(numbers);
  totalNum = numTotal(counts);
  document.getElementById("total-num").innerText = totalNum;
  // 更新每件商品的金额
  var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  subtotal.forEach(function (sub, index) {
    sub.innerHTML = amounts[index];
  });
  amounts = getEveryAmount(counts, unitPrices);
  // 更新总金额
  totalAmount = getTotalAmount(amounts);
  document.getElementById("total-amount").innerText = totalAmount;
}

check.css

table {
    border-collapse: collapse;
    width: 90%;
    text-align: center;
    margin: auto;
  }
  table caption {
    margin-bottom: 15px;
    font-size: 1.5rem;
  }
  table th,
  table td {
    border: 1px solid;
    padding: 5px;
  }
  table thead tr:first-of-type {
    background-color: lightblue;
  }
  /* 隔行变色: 偶数行 */
  table tbody tr:nth-of-type(even) {
    background-color: lightcyan;
  }
  table input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  button {
    width: 150px;
    height: 30px;
    outline: none;
    border: none;
    background-color: seagreen;
    color: white;
    letter-spacing: 5px;
  }
  button:hover {
    background-color: coral;
    cursor: pointer;
  }

总结：大体的能理解，如果不照做老师的抄写，自己是写不出的。还要加强学习。练习。由于都是抄写课堂上的实例，就不上图了

批改老师：

天蓬老师

批改状态：合格

老师批语：大家都是从模仿开始的

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Grid还原首页图片布局

2020-07-04 21:22:36