前端 JS 相关

更新: 2024-10-23 17:19:13   字数: 0 字   时长: 0 分钟

1、日期时间格式化

function formatDate(objDate, fmt) {
    var o = {
        "M+": objDate.getMonth() + 1, //月份
        "d+": objDate.getDate(), //日
        "h+": objDate.getHours() % 12 == 0 ? 12 : objDate.getHours() % 12, //小时
        "H+": objDate.getHours(), //小时
        "m+": objDate.getMinutes(), //分
        "s+": objDate.getSeconds(), //秒
        "q+": Math.floor((objDate.getMonth() + 3) / 3), //季度
        "S": objDate.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (objDate.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

2、格式化距现在的已过时间

function formatPassTime(startTime) {
  var currentTime = Date.parse(new Date()),
    time = currentTime - startTime,
    day = parseInt(time / (1000 * 60 * 60 * 24)),
    hour = parseInt(time / (1000 * 60 * 60)),
    min = parseInt(time / (1000 * 60)),
    month = parseInt(day / 30),
    year = parseInt(month / 12);

  if (year) return year + "年前"
  if (month) return month + "个月前"
  if (day) return day + "天前"
  if (hour) return hour + "小时前"
  if (min) return min + "分钟前"
  else return '刚刚'
}

3、格式化现在距结束时间的剩余时间

function formatRemainTime(endTime) {
  var startDate = new Date(); //开始时间
  var endDate = new Date(endTime); //结束时间
  var t = endDate.getTime() - startDate.getTime(); //时间差
  var d = 0,
    h = 0,
    m = 0,
    s = 0;

  if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24);
    h = Math.floor(t / 1000 / 60 / 60 % 24);
    m = Math.floor(t / 1000 / 60 % 60);
    s = Math.floor(t / 1000 % 60);
  }

  return d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
}

4、禁用复制

全局禁用复制

document.addEventListener('copy',(e)=>{
    e.preventDefault(); // 禁用复制
    // console.log(e.target);复制的是哪个标签段落
    // e.clipboardData.setData('text/plain','不准复制');
})

5、上传文件

HTML

<input type="file" id="file" />
<progress id="progress" value="0" max="100"></progress>

JS

// 获取input file 的dom对象
const inputFile = document.querySelector("#file");

// 监听change事件
inputFile.addEventListener('change', function() {
    var file = inputFile.files[0];
    // 使用formData 装载file
    const formData = new FormData();
    formData.append('file', file);
    // 上传文件
    upload(formData);
});

const upload = (formData) => {
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:5000/api/upload',
        data: formData,
        dataType: 'json',
        // 不进行数据处理和内容处理
        contentType: false,
        processData: false,
        xhr: function() {
          const xhr=$.ajaxSettings.xhr();
          if(xhr.upload) {
            xhr.upload.addEventListener('progress',e => {
              const { loaded, total } = e;
              var progress = Math.round((loaded*100)/total);
              console.log(progress) //获取进度条
              document.querySelector('#progress').setAttribute('value',progress);
            },false);
            return xhr;
          }
        },
        success: function (data) {
          console.log('上传成功');
        },
        error: function (err) {
            console.error('上传失败');
            console.error(err);
        }
    });
}