javascript如何实现计时功能?

更新日期: 2020-01-02阅读: 1.8k标签: 功能

JavaScript中可以使用setInterval()方法实现计时功能,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

JavaScript实现计时功能的方法代码

optionSearch();
function optionSearch() {
    //定义一个清除计时器的变量
    var timer = null;
 
    //自选标题区域
    $("#optional-title th").hover( function(){
        //第一步首先清除一遍计时器
        clearInterval(timer);
        //鼠标经过内容显示
        $("#optional-search").slideDown();
     }, function(){
        //鼠标离开的时候计时器五秒后隐藏内容
        timer = setInterval(function(){
            $("#optional-search").slideUp();
        }, 5000);
 
     });
 
    //自选搜所区域
    $("#optional-search").hover(function(){
        //鼠标进入搜索区域, 显示该区域并清除计时器
        $(this).show();
        clearInterval(timer);
 
    }, function(){
        // 鼠标离开该区域执行计时器
        timer = setInterval(function(){
            $("#optional-search").slideUp("");
        }, 5000);
    });
}

实现功能:鼠标移到标题显示搜索框, 鼠标离开后 5s后隐藏。 鼠标移动搜索区域,显示该区域,离开该区域 5s后隐藏。


setInterval() 方法:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示: 1000 毫秒= 1 秒。


clearInterval() 方法:

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量:


链接: https://www.fly63.com/article/detial/8077

vue实现打印功能的两种方法

通过npm 安装插件,安装 npm install vue-print-nb --save.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

js简体繁体转换

繁体词库封装好的,直接就对应简体转换了, 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示,本程序只在UTF8编码下测试过,不保证其他编码有效

js剪切板_Clipboard.js 使用

clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素,并且需要用户的点击操作才能实现功能

使用 css/less 动态更换主题色(换肤功能)

说起换肤功能,前端应该是非常熟悉了?一般来说换肤的需求分为几种:1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器

在react中实现打印功能

我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去

JS将货币小写转换为大写

JS将货币小写转换为大写,/** 数字金额大写转换(可以处理整数,小数,负数) */ [零, 壹,贰,叁,肆,伍,陆,柒,捌,玖]

如何较为优雅地实现新手引导功能?

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能: 新手引导 。

7个好用的TypeScript 新功能

在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

5个CSS新功能

在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能:

Vue实现随机验证码功能

步骤1 创建一个名为identify.vue的子组件,步骤2 在子组件中进行注册和引用 ,步骤3 在主页面中使用子组件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!