js 小案例

1. 仿京东倒计时

div {
    width: 20px;
    height: auto;
    background-color: black;
    color: white;
    display: inline-block
}

<div class="house">23</div>
<div class="minute">59</div>
<div class="second">59</div>

var house = document.querySelector('.house');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// 设置截至日期时间戳
var deadTime = +new Date('2020-9-24 23:59:59');
// 倒计时前先调用一次
countDown();
// 开始倒计时
window.setInterval(countDown,1000);
function countDown() {
    // 获取当前时间时间戳
    var nowTime = +new Date();
    var times = (deadTime - nowTime)/1000; //倒计时剩余秒数

    var s = parseInt(times%60);       // 获取倒计时秒数
    second.innerText = s<10?'0'+s:s;
    var m = parseInt(times/60%60);    // 获取倒计时分钟数
    minute.innerText = m<10?'0'+m:m;
    var h = parseInt(times/3600%60);  // 获取倒计时小时数
    house.innerText = h<10?'0'+h:h;
}

2. 倒计时接收手机短信(验证码)案列

输入手机号接收短信：<input type="text">
<button>发送</button>

var btn = document.querySelector('button');
var time = 3;
btn.addEventListener('click',function () {
    btn.disabled = true;
    var timer = setInterval(function () {
        if (time == 0){
            // 如果倒计时变为了0，则恢复按钮选项,清除定时器，并且重置time的值
            btn.disabled = false;
            btn.innerHTML = '发送';
            clearInterval(timer);
            time = 3;
        }else {
            btn.innerHTML = '还剩余'+time+'秒';
            time--;
        }
    },1000)
})

3. 鼠标拖动登录框案列

.a1{
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    user-select:none; /* 文字不可选 */
}
.d1{
    width: 700px;
    height: 380px;
    background-color: aliceblue;
    margin-top: 200px;
    margin-left: 600px;
    display: none;
    position: relative; /* 定位要设置relative，不然拖拽不了 */
}
.d2{
    font-size: 30px;
    padding-left: 275px;
    padding-top: 35px;
    user-select:none; /* 文字不可选 */
}
.d3{
    padding-top: 50px;
    padding-left: 100px;
    user-select:none; /* 文字不可选 */
}
button{
    font-size: 30px;
    margin-top: 64px;
    margin-left: 266px;
    width: 160px;
}
p{
    display : inline;
    font-size: 20px;
    user-select:none; /* 文字不可选 */
}
input{
    height: 20px;
    width: 370px;
}
.c1{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: aliceblue;
    font-size: 20px;
    margin-top: -388px;
    margin-left: 668px;
    display: none;
    user-select:none; /* 文字不可选 */
}

<div class="a1">
    点击弹出登录框
</div>

<div class="d1">
    <div class="d2">
        账号登录
    </div>
    <div class="d3">
        <p>用户名：</p><input type="text" inputmode="请输入用户名">
    </div>
    <br>
    <div class="d3">
        <p>密码:</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" inputmode="请输入密码">
    </div>
        <button>登&nbsp;&nbsp;录</button>
    <div class="c1">
        关闭
    </div>
</div>

var a1 = document.querySelector('.a1');
var d1 = document.querySelector('.d1');
var c1 = document.querySelector('.c1');

// 点击显示登陆框
a1.addEventListener('click',function (){
    d1.style.display = 'block';
    c1.style.display = 'block';
})
// 点击关闭隐藏登录框
c1.addEventListener('click',function (){
    d1.style.display = 'none';
    c1.style.display = 'none';
})
// 获取鼠标在登录框中的坐标
d1.addEventListener('mousedown',function (e){
     var x = e.pageX - this.offsetLeft; // 鼠标在登录框中x坐标 x不变
     var y = e.pageY - this.offsetTop;  // 鼠标在登录框中y坐标 y不变
    // 登录框移动：将鼠标在登录框中的坐标赋予登录框
    document.addEventListener('mousemove',move)
    function move(e){
        d1.style.left = e.pageX - x  - 600 + 'px'; // 别忘记+'px'
        d1.style.top  = e.pageY - y  - 200 + 'px';
    }
    // 鼠标弹起，让登录框移动事件解除
    document.addEventListener('mouseup',function (){
        document.removeEventListener('mousemove',move);
    })
})

4. 京东放大商品图片案例

.d1 {
      width: 350px;
      height: 350px;
      border: black solid 1px;
      margin-top: 200px;
      margin-left: 300px;
    }

    .img1 {
      width: 349px;
      height: auto;
      pointer-events: auto;
    }

    .dd1 {
      width: 200px;
      height: 200px;
      background-color: darkorange;
      opacity: 50%;
      margin-top: -354px;
      display: none;
      position: relative;
      pointer-events: none;
    }

    .d2 {
      width: 600px;
      height: 600px;
      border: black solid 1px;
      position: relative;
      margin-left: 780px;
      margin-top: -514px;
      display: none;
      overflow: hidden;
    }

    .img2 {
      width: 800px;
      height: auto;
      position: relative;
      top: 0;
      left: 0;
    }

<div class="d1">
    <img class="img1" src="./img/kh.png">
    <div class="dd1"></div>
  </div>
  <div class="d2">
    <img class="img2" src="./img/kh.png">
  </div>

 var d1 = document.querySelector('.d1'); // 小图div
    var img1 = document.querySelector('.img1')
    var dd1 = document.querySelector('.dd1'); // 遮挡层
    var d2 = document.querySelector('.d2'); // 大图div
    var img2 = document.querySelector('.img2'); // 大图片

    // 事件一：鼠标经过（离开）小图时，显示（隐藏）大图和遮挡层
    d1.addEventListener('mousemove', function () {
      dd1.style.display = 'block';
      d2.style.display = 'block';
    })
    d1.addEventListener('mouseout', function () {
      dd1.style.display = 'none';
      d2.style.display = 'none';
    })
    // 事件二：鼠标在小图中移动，遮挡层跟着移动
    img1.addEventListener('mousemove', function (e) {
      // 获取鼠标在小图中的位置
      console.log(this.offsetLeft);// 不变 图片在页面中位置
      console.log(this.offsetTop);// 不变
      var x = e.pageX - this.offsetLeft; // 鼠标在图片中位置=鼠标在页面中位置-图片在页面中位置
      var y = e.pageY - this.offsetTop;
      // 将获取鼠标在小图中的位置数值赋给遮挡层
      var dd1x = x - dd1.offsetWidth / 2; // 遮挡层位置  减去遮挡层宽度一半使得鼠标在遮挡层中央
      var dd1y = y - dd1.offsetHeight / 2;
      // 将遮挡层局限在图片内
      if (dd1x <= 0) { // 如果遮挡层x坐标小于0，则dd1.style.left = 0;
        dd1x = 0;
      } else if (dd1x >= 150) { // 150 = d1.offsetWidth - dd1.offsetWidth
        dd1x = 150;
      }
      if (dd1y <= 0) { // 如果遮挡层x坐标小于0，则等于0局限
        dd1y = 0;
      } else if (dd1y >= 150) {
        dd1y = 150;
      }
      dd1.style.left = dd1x + 'px';
      dd1.style.top = dd1y + 'px';
      // 事件三：大图片跟随遮挡层移动
      // 大图片移动距离(bigX) = 遮挡层移动距离(dd1x)*大图片最大移动距离(d2Max)/遮挡层最大移动距离(dd1Max)
      var d2Max = d2.offsetWidth - img2.offsetWidth;
      var dd1Max = d1.offsetWidth - dd1.offsetWidth;
      var bigX = dd1x * d2Max / dd1Max;
      var bigY = dd1y * d2Max / dd1Max;

      img2.style.left = bigX + 'px';
      img2.style.top = bigY + 'px';
    })

5. 仿京东固定侧边栏

.head {
      width: 1200px;
      height: 500px;
      background-color: aqua;
      margin-top: 50px;
      margin-left: 500px;
    }

    .banner {
      width: 1200px;
      height: 600px;
      background-color: red;
      margin-top: 50px;
      margin-left: 500px;
    }

    .main {
      width: 1200px;
      height: 700px;
      background-color: brown;
      margin-top: 50px;
      margin-left: 500px;
      margin-bottom: 400px;
    }

    li {
      width: 40px;
      height: 40px;
      font-size: 14px;
      color: #333;
      background: aliceblue;
      list-style-type: none;
      text-align: center;
      margin-top: 2px;
    }

    .ulabsolute {
      padding: 0px;
      position: absolute;
      margin-left: 1750px;
      margin-top: -2000px;
    }

    .top {
      display: none;
    }

    .ulfixed {
      position: fixed;
      margin-left: 1710px;
      margin-top: -2350px;
    }

<div class="head">head</div>
  <div class="banner">banner</div>
  <div class="main">main</div>
  <div>
    <ul class="ulabsolute">
      <li>京东<br>秒杀</li>
      <li>特色<br>优选</li>
      <li>频道<br>广场</li>
      <li>为你<br>推荐</li>
      <li class="top">返回<br>顶部</li>
    </ul>
  </div>

    var main = document.querySelector('.main');
    var ul = document.querySelector('ul');
    var head = document.querySelector('.head');
    var tp = document.querySelector('.top'); // 这里不能命名top，会报错
    var ulTop = ul.offsetTop;
    var mainTop = main.offsetTop
    document.addEventListener('scroll', function () {
      console.log(ulTop);
      console.log(window.pageYOffset);
      if (window.pageYOffset >= ulTop) {
        ul.className = 'ulfixed';
      } else {
        ul.className = 'ulabsolute';
      };
      if (window.pageYOffset >= mainTop) {
        tp.style.display = 'block';
      } else {
        tp.style.display = 'none';
      }
    })

6. 缓动动画及回调函数变色及封装

.tortoise {
      position: absolute;
      /*不添加绝对定位盒子不会移动*/
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .rabbit {
      position: absolute;
      top: 300px;
      width: 100px;
      height: 100px;
      background-color: cornflowerblue;
    }

    button {
      margin-top: 250px;
    }

<div class="tortoise"></div>
  <button class="btn300">点击兔子走</button>
<div class="rabbit"></div>

    var tortoise = document.querySelector('.tortoise');
    var rabbit = document.querySelector('.rabbit');
    var btn300 = document.querySelector('.btn300');
    var btn800 = document.querySelector('.btn800');

    // 封装动画函数
    function move(obj, target, callback) {
      clearInterval(obj.timer); // 第二次以及之后调用都会先清除之前的定时器，避免定时器的叠加
      obj.timer = setInterval(function () { // 此处不用var timer是为了不用再开辟新的空间
        // 设置步长添加缓动效果
        // 步长公式： (目标位置 - 当前位置) / 10
        var step = (target - obj.offsetLeft) / 10;
        // 如果步长大于0则向上取整，小于0向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) { // 如果到达目的地则清除定时器
          clearInterval(obj.timer);
          callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
      }, 50)
    }
    move(tortoise, 300);
    btn300.addEventListener('click', function () {
      move(rabbit, 300, function () {
        rabbit.style.backgroundColor = 'cornflowerblue'; // 添加回调函数定时器停止时变色
      });
    });
    btn800.addEventListener('click', function () {
      move(rabbit, 800, function () {
        rabbit.style.backgroundColor = 'red'; // 添加回调函数定时器停止时变色
      });
    });

7. 点击按钮实时显示当前时间

<div style="width: 300px; height: 40px; background-color: aliceblue"></div>
<button>点击我显示时间</button>
<p style="width: 300px; height: 40px; background-color: aliceblue"></p>

    var div = document.querySelector('div');
    var button = document.querySelector('button');
    button.onclick = function () {
      div.innerText = date();
    };
    function date() {
      var date = new Date();
      var year = date.getFullYear(); //得到当前年份
      var month = date.getMonth() + 1; //得当当前月(0~11)
      var dates = date.getDate();  //得到当前日
      var day = date.getDay();  //得到当前星期几 星期一~六 为 1~6 星期日为 0

      var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
      return '今天是  ' + year + '年 ' + month + '月  ' + dates + '日  ' + arr[day];
    }

    var p = document.querySelector('p');
    p.innerText = date(); //不用绑定事件，刷新即显示时间

8. 表单全选和取消全选

table {
      margin: 100px auto;
      border: 1px solid;
    }

    td,
    th {
      padding: 10px;
    }

<div>
    <table rules="all">
      <tr>
        <th colspan="5">购物单</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="checkAll"></td>
        <th>商品名称</th>
        <th>商品单价(元)</th>
        <th>商品件数(件)</th>
        <th>商品总价(元)</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="check"></td>
        <td>士力架</td>
        <td>6</td>
        <td>2</td>
        <td>12</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check"></td>
        <td>彩虹糖</td>
        <td>12</td>
        <td>3</td>
        <td>36</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check"></td>
        <td>可乐</td>
        <td>2.5</td>
        <td>4</td>
        <td>10</td>
      </tr>
    </table>
  </div>

var checkAll = document.getElementById('checkAll');
    var checks = document.getElementsByClassName('check');

    // 总按钮控制小按钮
    checkAll.onclick = function () {
      // this.checked 是该复选框的选择状态，true为被选中，false为为选中
      //console.log(this.checked);
      if (this.checked == true) {
        for (var i = 0; i < checks.length; i++) {
          checks[i].checked = this.checked;
        }
      } else {
        for (var i = 0; i < checks.length; i++) {
          checks[i].checked = this.checked;
        }
      }
    }

    // 小按钮控制总按钮：当小按钮全选时，总按钮被选中；当小按钮没有被全选时，总按钮不被选中
    for (var i = 0; i < checks.length; i++) {
      checks[i].onclick = function () {
        // 定义一个flag控制总按钮的是否选中状态
        var flag = true;
        for (var j = 0; j < checks.length; j++) { // 每次点击小按钮都遍历循环，如果有一个小按钮没被选中，则flag=false
          if (!checks[j].checked) {
            flag = false;
          }
        }
        // 点击完之后，就flag状态赋值给总按钮
        checkAll.checked = flag;
      }
    }

9. 动态生成表格

table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: #ccc;
    }

<table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>

// 创建表格数据，一个对象就是一行数据
      var datas = [
        {
          name: '熊大',
          subject: 'javaScript',
          score: 100
        }, {
          name: '熊二',
          subject: 'javaScript',
          score: 88
        }, {
          name: '光头强',
          subject: 'javaScript',
          score: 95
        }
      ];
      var tbody = document.querySelector('tbody');

      for (var i = 0; i < datas.length; i++) { // datas.length为几就代表有几个对象，就有多少行数据
        var tr = document.createElement('tr'); // 1. 创建行
        tbody.appendChild(tr);  // 添加行
        // 2. 创建列 行里面创建单元格 td 单元格数量取决于每个对象里的属性个数 for in循环遍历对象
        for (var k in datas[i]) { // k为属性名  obj[k]为属性值，此处为datas[i][k]
          var td = document.createElement('td'); // 创建列
          td.innerHTML = datas[i][k]; // 单元格添加数据
          tr.appendChild(td);  // 添加列
        }
        // 3.创建有删除两个字的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>'; //href="javascript:;控制链接不回跳转
        tr.appendChild(td);
      }

      // 删除操作
      var as = document.querySelectorAll('a');
      for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
          // 点击删除当前行 node.removeChild(child) node为删除节点的父级 child为所需要删除的节点
          tbody.removeChild(this.parentNode.parentNode);
        }
      }

10. 禁用鼠标右键菜单和禁用鼠标选中文字

<div>我是一段不能被复制粘贴的文字</div>

var div = document.querySelector('div');
// contextmenu：右键菜单  绑定事件对象e.preventDefault(); 即可禁用右键菜单
div.addEventListener('contextmenu',function (e) {
    e.preventDefault();
})
// selectstart： 选择开始 绑定事件对象e.preventDefault(); 即可禁用鼠标拖拽选中文字
div.addEventListener('selectstart',function (e) {
    e.preventDefault();
})

11. 鼠标坐标位置获取

<div style="height: 3000px"></div>

      var div = document.querySelector('div');
    
      div.addEventListener('click', function (e) {
      // client: 鼠标在可视区的x和y坐标
      console.log(e.clientX);
      console.log(e.clientY);
      console.log('------------------------------');

      // page: 鼠标在页面文档中的x和y坐标
      console.log(e.pageX);
      console.log(e.pageY);
      console.log('-------------------------------');

      // screen: 鼠标在屏幕中的x和y坐标
      console.log(e.screenX);
      console.log(e.screenY);
    })

12. 图形跟随鼠标移动

img {
      position: absolute;
      width: 50px;
      height: auto;
    }

<img src="url">

      var img = document.querySelector('img');
    
      document.addEventListener('mousemove', function (e) {
      var x = e.pageX;
      var y = e.pageY;

      img.style.left = x - 10 + 'px';
      img.style.top = y + 'px';
      })