Community Learn Tools Library Leisure

English

Home > List of blog posts > 原生javascript实例(一键换肤、js更改背景样式、全选不全选、购物车)

Blogger Information

Blog 56

fans 1

comment 0

visits 62259

Special Recommendation

More>

Related recommendations

一键换肤

需要更改背景的图片
前端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;
  }

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

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：大家都是从模仿开始的

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Grid还原首页图片布局

2020-07-04 21:22:36