首页 > 其他分享 >vue3 js 方式实现学习时长正向计数器 时分秒转秒 秒转时分秒

vue3 js 方式实现学习时长正向计数器 时分秒转秒 秒转时分秒

时间:2024-03-01 22:12:44浏览次数:18  
标签:00 const value js second 转秒 var 时分秒 minute

//学习时长
const Locktime = ref('00:00:00');
const timeAlarmTWO = ref(null);
const hour = ref(0);
const minute = ref(0);
const second = ref(10);
const reckon = ref(true);// 判断是否在计时
//判断一下数值的变化
const timer = () => {
      second.value = second.value+1;
      if(second.value >= 60){
        second.value = 0;
        minute.value = minute.value + 1;
      }
      if(minute.value >= 60){
        minute.value = 0;
        hour.value = hour.value + 1;
      }
      let h = hour.value < 10 ? '0' + hour.value : hour.value;
      let m = minute.value < 10 ? '0' + minute.value : minute.value;
      let s = second.value < 10 ? '0' + second.value : second.value;
      Locktime.value = h + ":" + m + ":" + s;
    }
const Lockscreen = ()=> {
      if(reckon.value){
        reckon.value = false;
        //  定时器,每秒
        timeAlarmTWO.value=setInterval(timer,1000);
      } else {
        reckon.value = true;
        //second.value = 0;
        //minute.value = 0;
        //hour.value = 0;
        //Locktime.value = '00:00:00';
        //  一定要关闭!!!!
        clearInterval(timeAlarmTWO.value);
        timeAlarmTWO.value = null;
      }
    }
//将秒变为时分秒
const convertSecondsToTime = (seconds:any) => {
   
    var hours = Math.floor(seconds/ 3600); // 计算小时数
    seconds -= hours * 3600; // 从原始秒数中减去已经计算过的小时数
    
    var minutes = Math.floor(seconds / 60); // 计算分钟数
    seconds -= minutes * 60; // 从原始秒数中减去已经计算过的分钟数
    let h = hours < 10 ? '0' + hours : hours;
    let m = minutes < 10 ? '0' + minutes : minutes;
    let s = seconds < 10 ? '0' + seconds : seconds;
    return `${h}:${m}:${s}`;
}
 
var videoDurationInSeconds = 121.123423; // 示例视频持续时间(单位:秒)
var strPoint=videoDurationInSeconds.toString();//转字符串
var timeFormat = convertSecondsToTime(strPoint.split('.')[0]);//拆分
var pointFormat=strPoint.split('.')[1];
if(pointFormat)
{
  console.log(timeFormat+'.'+pointFormat);
}
else
{
  console.log(timeFormat);
}

/**
     * 时间转为秒
     * @param time 时间(00:00:00)
     * @returns {string} 时间戳(单位:秒)
     */
const convertTimeToSeconds = (times:any) => {
        var str = times.split('.')[0];

        var hour = str.split(':')[0];
        var min = str.split(':')[1];
        var sec = str.split(':')[2];
        str = Number(hour*3600) + Number(min*60) + Number(sec);
        if(times.split('.')[1])
        {
          str=str+'.'+times.split('.')[1];
        }
        return str;
    };
var videoTimes = '00:02:01.902'; // 示例视频持续时间(单位:秒)
var timesFormat = convertTimeToSeconds(videoTimes);
console.log(timesFormat);

 

标签:00,const,value,js,second,转秒,var,时分秒,minute
From: https://www.cnblogs.com/wuzexin/p/18048064

相关文章

  • 前端 xlsx js javascript 处理excel 数据展示 日期格式处理
     1、参考https://blog.csdn.net/Seven71111/article/details/107375712https://blog.csdn.net/weixin_44987713/article/details/130129282 https://blog.csdn.net/qq_57952018/article/details/134812452 2、存在的问题a、千年虫b、定义一个转换日期格式的方法(转成......
  • 实战2-__jsl_clearance_s 生成
    目标网站aHR0cHM6Ly96cnp5aGdoai5oZWZlaS5nb3YuY24veHd6eC9ic2R0L2luZGV4Lmh0bWw=1.简单介绍加速乐是创宇推出的一款在线免费网站CDN加速、网站安全防护平台,致力于系统化解决网站访问速度过慢及网站反黑客问题加速乐三步骤a.第一次请求,响应码521,服务器返回的Cookie中携带......
  • Nestjs系列(一) Nestjs基础
    快速使用NestjsNest项目的文件层级和JAVA项目的层级架构较为相似。Nest项目的层级架构统一由ControllerModuleService三个模块组成。安装nestcli,创建项目npminstall-g@nestjs/clinestnew[项目名]项目默认运行至http://localhost:3000/上当nest版......
  • JS面试题
    1.判断一个函数是否标记为asyncfunctionisAsyncFunction(func){conststr=Object.prototype.toString.call(func);returnstr=='[objectAsyncFunction]';}2.两个大整数之和/***1.将两个数字对齐*2.从后往前循环,按位相加同时加上进位*3.计算进位*4.到最......
  • js使用a标签下载文件并指定名称
    当使用js下载路径带有xxxxx.png的路径图片时,下载下来的名称一直是xxxxx.png,有时候又需要指定文件名称,代码如下downFile(ShowUrl,Name){//ShowUrl表示路径Name表示需要的名称constx=newwindow.XMLHttpRequest();x.open('GET',ShowUrl,true);x.resp......
  • JS/Vue 学习小记
    可能要写点轮子。。。先学学前端知识吧,记录一下。遍历:for(letiofS){i...}for(letiinS){S[i]...}JS是弱类型的语言。目前感觉到的特性有:数组不同元素可以是不同类型的函数返回值不需要声明,直接functionF()就可以JS中对象用大括号表示,成员可以是各种类型,包......
  • Nest.js 大文件分片上传
    文件上传是常见需求,只要指定content-type为multipart/form-data,内容就会以如下图这种形式传递到服务端:服务端再按照multipart/form-data的格式提取数据,就能达到其中的文件。 但是当文件很大的时候,事情变得不一样了假设传一个100M的文件需要三分钟,那么传1G的文件就需要30......
  • 记账本jsp
     <%@pagecontentType="text/html;charset=UTF-8"language="java"%><!DOCTYPEhtml> <html><head><metacharset="UTF-8"> <title>家庭记账本主页</title> <!--采用绝对路径导入css文件--> <linkrel=&......
  • jsp自定义标签
    一、自定义标签的作用自定义标签主要用于移除Jsp页面中的java代码。二、自定义标签开发和使用2.1、自定义标签开发步骤1、编写一个实现Tag接口的Java类(标签处理器类)1packageme.gacl.web.tag;23importjava.io.IOException;45importjavax.servl......
  • Livewire 和 Alpine.js比较
    Livewire和Alpine.js是两个在构建交互式Web应用程序时常用的工具,它们在一些方面有相似之处,但也有一些关键区别。Livewire基于Laravel:Livewire是Laravel的一部分,与Laravel框架紧密集成,使得开发者可以使用Laravel的语法和功能来构建动态页面。服务器端渲染:Livew......