js实现简单功能合集（三）

sherlockkid7
255 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

1. 实现数字增长动效

在一些官网界面或者大屏可视化展示一些数据，需要实现数据动态的递增的动画效果。

a. 获取所有需要展示数据的元素，循环遍历让各自的数据从零增加到需展示目标数据；

b. getAttribute（）方法获取使用自定义属性（data-target）定义的目标数据；

c. 对比增加的数据和目标数据，如果小于，就使用setTimeout()方法执行一次增加数据的方法，相反，就让需展示数据元素的文字内容为目标数据

const counters = document.querySelectorAll('.counter');
counters.forEach(item => {
  item.innerText = 0;
  const updateCounter = () => {
      // 目标数字
      const targetCounter = +item.getAttribute('data-target');
      const sumCounters = +item.innerText;   
      // 递增数  除以的数字（自定义）越大，每次增加的数字越小
      const increment = targetCounter / 400;
      if(sumCounters < targetCounter) {
        item.innerText = Math.ceil(sumCounters + increment);
        setTimeout(updateCounter, 1);
      } else {
        item.innerText = targetCounter;
      }
  }
  updateCounter()
})

如果需要页面滚到数据展示的位置，再实现数据动态的递增的动画效果。可以结合IntersectionObserver API （监听元素是否到了当前视口）实现功能。

image.png

引申的知识点：

  1. 变量前的+（+item.innerText）是什么意思？ 可以理解为Number(item.innerText)，按照Number函数的规则转换为数值

以下是Number函数的几个规则:

  • Boolean:true返回1，false返回0

  • 数据值，直接返回

  • null，返回0

  • undefined，返回NaN

  • 对于字符串，将其转换为十进制数值，会忽略前面的0（16进制除外）；空字符串返回0；浮点数会返回浮点数值；其他格式字符串返回NaN

  1. getAttribute()方法

elementNode.getAttribute(name)：通过元素节点的属性名称获取属性的值，name是属性名称

2. 实现剪切板复制内容的功能

方法一：Clipboard.writeText()方法

Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象。

Clipboard.writeText()方法用于将文本内容写入剪贴板。

const source = document.querySelector('.source');
const copyBtn = document.querySelector('.copyUrl');
// 需要复制到剪切板的内容
const text = source.innerText;
copyBtn.addEventListener('click',copyPageUrl)
async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(text);
    alert("复制成功");
  } catch (err) {
    alert("复制失败");
  }
}

方法二：使用第三方库clipboard.js实现

const source = document.querySelector('.source').innerText;
const clipboard = new ClipboardJS('.copyUrl', {
    text() {
      return url = source;
    }
});
clipboard.on('success', function (e) {
    alert("复制成功");
});
clipboard.on('error', function (e) {
    alert("复制失败");
});

3. 实现选择不同国籍的功能

在网上找的国家数据，把数据循环遍历加入到页面需要选择国籍的元素中

const countryData = [
  { value: "Angola", label: "安哥拉" },
  ......
]  
let optionData = "";
countryData.forEach((item) => {
  optionData += `<div class="radio radio-row"><label><input type="radio" name="country" value="${item.label}">${item.label}</label></div>`;
});
radioCountry.innerHTML = optionData;

引申的知识点： innerHTML和innerText的区别？

innerHTML、innerText这两个属性，都可以用来获取或者设置元素的内容。

innerHTML：HTML标签+文本信息 ，innerHTML获取内容会保留空格和换行，设置内容会识别HTML标签

innerText：文本信息，innerText获取内容会去除空格和换行

avatar
文章
阅读
粉丝