位置: 编程技术 - 正文

javascript计时器编写过程与实现方法(js中计时器怎么写)

编辑:rootadmin

推荐整理分享javascript计时器编写过程与实现方法(js中计时器怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js实现计时器在线时间,js中计时器的用法,js计时器代码从0到100,js计时器代码从0到100,js计时函数,js实现计时器在线时间,js中计时器的用法,js中计时器的用法,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript是一门非常容易上手的脚本语言,而且工具繁多,功能强大,因为一直做后端的关系,笔者目前也只是略学一点皮毛。

接下来进入正题——计时器。先谈下计时器的功能:

1.计时器要能够在页面上显示时间

2.每秒钟计时器刷新,秒每满进分钟1,分钟每满进小时1

3.计时器需要能够重置,也就是重新计时

4.计时结束时,需要能够有获取计时时间的方法

以上功能很简单,计时还应该有暂停、继续计时等功能,没关系,我们一个一个来。

第一步:

我们做一个简单的页面,要有一个现实时间的标签,要有开始、暂停俩按钮,页面绘制如下:

不要为一个页面花太多时间哦,这只是帮助你写写第一段代码练练手~

第二步:

我们分析下计时器需要哪些属性:

1.计时,需要开始时间

2.结束时间

3.总共走了多长时间,这个属性是要返回给使用者的

4.展示器,其实就是个jquery对象或者dom对象啦,计时是要在一个地方展示的嘛

5.展示时间需要进行拆解,于是我们有小时属性

6.分钟属性

7.秒属性(其实被总时间囊括了,先记上,万一用得到呢)

我们看下代码:

乍一看好像多了几个属性,因为计时会用到JavaScript的setTimeout方法,该方法会返回一个对象,我们可以利用此对象将setTimeout清除(clearTimeout);

第三步:

我们分析下计时器需要哪些方法:

1.计时器需要启动,于是我们有开始方法

javascript计时器编写过程与实现方法(js中计时器怎么写)

2.计时器需要停止,于是我们有停止方法,停止后应该告诉使用者计了多长时间,于是应该返回时长

3.计时器还应该有个暂停功能,暂停后,可以在暂停的位置上再次开始计时,暂停也应该返回时长

4.围绕启动停止,还应该有每秒钟计时器的内心活动,类似一个委托方法,美秒执行一次

5.呈现逻辑,我们要讲真正的时间显示给页面上的展示器,并且做一些可读性更好的格式转换

上代码,构造函数:

计时器开始:

计时结束:

每秒钟计时器的内心活动:

为了能够展现上图的::,我们需要一段呈现逻辑

我们启动计时器,这个简单的计时器就开始跑了^_^

是不是少了点什么:计时器哪能没有暂停呀,笔者那会构思这些的时候,也没想到暂停功能,正看着它一秒一秒跳动着,傻乐呢,直到业务需要,才想起来,得加上这功能。

没关系,我们继续设计,demo页上添加一个暂停按钮:P

先分析下:

1.暂停后,肯定要在上次暂停的节点上重新开始,这块功能我们做在开始按钮里,于是我们需要一个标识位,来判断是重新开始,还是暂停后开始

2.我们需要记录暂停的时间点

3.暂停的时间间隔最好也能记下来,能用得到,不然再次开始的时候,时间在呈现上会立刻跳到间隔之后(比如暂停时是::,暂停一分钟后,如果不作调整直接开始,时间会变成::)

于是我们添加三个属性:

暂停方法:

重写开始方法和呈现方法:

以上,搞定,我们的计时器拥有了暂停功能~

看下代码全览,核心代码不到一百行。

写到这里,主要工作就做完啦,其实还可以进行封装,利用prototype,将方法全部附到一个对象里,当实例化一个timer对象并初始化一些关键属性后,这些方法都可以被对象调用。这里就不赘述了,感兴趣的童鞋可以试试~

精通JavaScript的this关键字 JS中的this关键字让很多新老JS开发人员都感到困惑。这篇文章将对this关键字进行完整地阐述。读完本文以后,您的困惑将全部消除。您将学会如何在各

JS三级可折叠菜单实现方法 本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考,具体如下:.ASPX代码:%@PageLanguage="C#"AutoEventWireup="true"CodeFile="NavigateMenu.aspx.cs"Inherit

JavaScript+CSS实现的可折叠二级菜单实例 本文实例讲述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考,具体如下:.aspx文件:%@PageLanguage="C#"AutoEventWireup="true"CodeFile="NavigateMenu.aspx.c

标签: js中计时器怎么写

本文链接地址:https://www.jiuchutong.com/biancheng/378997.html 转载请保留说明!

上一篇:javascript插件开发的一些感想和心得(js插件大全)

下一篇:精通JavaScript的this关键字(javascript 语言精粹(修订版))

  • 个人独资企业是否享受六税两费政策
  • 印花税购销合同改为买卖合同
  • 收到上年度所得税返还会计分录
  • 企业收到财政局退款需要开票吗
  • 汇算清缴补交所得税怎么做凭证
  • 领备用金填什么单子
  • 年报过期了
  • 亏损企业捐赠支出怎么算
  • 物业电费加价如何举报
  • 固定资产可以一次抵扣吗
  • 税务顾问费怎么做账务处理?
  • 视频制作费属于劳务费吗
  • 质量罚款入什么科目
  • 往来款可以作为投资款吗
  • 资产总额和净资产总额的区别
  • 长期待摊会计处理
  • 开票税额与申报税额差一分账务怎么处理
  • 合同签订中,可以撤销吗
  • 补缴税款会计分录
  • 金税盘减免税款可以抵扣销项税吗
  • 什么是现金解款支付
  • 若依框架讲解
  • Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案
  • 残疾人在公司上班公司有什么好处
  • 利润表项目本期怎么算
  • 静态显示方式
  • thinkphp3.0
  • uni-app--》uni-app的生命周期讲解
  • 什么是重绘和回流
  • ie浏览器网页滚动条怎么隐藏
  • css盒子模型怎么做
  • php实现当前页面的快捷键
  • php post数据
  • 帮助命令的快捷键是什么
  • 管理人员工资属于直接费还是间接费
  • 劳务费如何支付
  • aspcms标签
  • 土地增值税扣除项目20%
  • 扶贫款分红怎么做账
  • 事业单位相关规定有哪些
  • 可供出售交易性金融资产申报表怎么填
  • 房租押金可以要回来吗
  • 企业不计提固定资产损失
  • 预付发票能入账吗
  • 银行对账单和存款日记账怎样核对并标识
  • 包装物押金要计入增值税吗
  • 水电费 会计
  • 销售货物提供运输服务分录
  • 库存商品盘点制度
  • 总部结算什么意思
  • 建筑企业案例
  • 数据库中两张表tab1
  • macos mysql
  • mysql 5.7.11 winx64.zip安装配置方法图文教程
  • solaris 安装
  • win7系统怎么把字体调大
  • win8系统连接不了网络
  • xp系统无法启动怎么办
  • 苹果发布会最新消息
  • mac os x 10.12.2 Beta1怎么升级?macOS Sierra 10.12.2 Beta升级图文教程
  • VirtualBox虚拟机免费
  • windows 8.1更新
  • 64位win7安装kb3038314补丁更新失败临时解决方法
  • pacis.exe - pacis是什么进程 有什么用
  • win7任务栏怎么全部显示出来
  • win7能用多屏协同吗
  • react 技巧
  • android layout布局
  • javascript脚本怎么用
  • linux的gunzip命令
  • 轮播图简单实现
  • 使用SQLite本地数据库
  • jquery提交
  • android assets
  • 地方税务局和国家税务局合并
  • 江苏省办理准生证的app叫什么
  • 办理跨区域事项报验
  • 建筑装饰业发票怎么开
  • 城市维护建设税的计税依据
  • 小规模纳税人租赁费税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设