网站（javascript等) 如何让网页里某图片被长按3秒后再等待6秒后跳转到某页面?

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站（javascript等) 如何让网页里某图片被长按3秒后再等待6秒后跳转到某页面?相关的知识，希望对你有一定的参考价值。

方法很多的，下面就是一种方法，时间自己定义！
在<head></head>之间加入js<script language="javascript">
var secs = 3; //倒计时的秒数
var URL ;
function Load(url)
URL = url;
for(var i=secs;i>=0;i--)

window.setTimeout(\'doUpdate(\' + i + \')\', (secs-i) * 1000);


function doUpdate(num)

document.getElementById(\'ShowDiv\').innerhtml = \'将在\'+num+\'秒后自动跳转到主页\' ;
if(num == 0) window.location = URL;

</script> 参考技术A var time=0;
$('img').on('mousedown',function()
time=new Date().getTime();
console.log(time);
)
$('img').on('mouseup',function()
var time1=new Date().getTime();
console.log(time1);
console.log(time);
if(time1-time>=3000)
setTimeout('location.href="https://www.baidu.com"',6000)


)

在 JavaScript 中，如何让函数在特定时间运行？

【中文标题】在 JavaScript 中，如何让函数在特定时间运行？【英文标题】：In JavaScript, how can I have a function run at a specific time? 【发布时间】：2014-09-04 15:56:51 【问题描述】：

我有一个托管仪表板的网站：我可以编辑页面上的 JavaScript，我目前每五秒刷新一次。

我现在正在尝试让window.print() 每天早上 8 点运行。

我该怎么做？

【问题讨论】：

网页上的JavaScript真的听起来不像是适合这个的工具... JS 没有固定时间的调度功能。您可以获取当前时间，确定早上 8 点是什么时候，并为该时间间隔设置超时。但这一切都毫无意义，除非您在该页面上保持浏览器打开。仅在 html 中添加一些 JS 并不能使其可执行，直到页面实际在浏览器中查看，或者您正在使用服务器端 JS，例如 node.js 我猜你正在使用 setInterval 方法。在该方法中，查看上午 8 点与当前时间之间的差异是否小于 5 秒。如果是这样，请执行 setTimeOut 打印，时间不同。但是你的浏览器需要在那个时候打开 您明白 JavaScript 只在您在浏览器中打开页面时运行，对吧？ 请记住，print通常需要一些用户确认通过，浏览器也可以在选项卡/窗口处于非活动状态时为setSimeout进行奇怪的事情。 span> 【参考方案1】：

我会建议在 Web Worker 的概念中做，因为它独立于其他脚本并且运行不影响页面的性能。

    创建一个网络工作者 (demo_worker.js)

    var i = 0;
var date = new Date();
var counter = 10;
var myFunction = function()
    i = i + 1;
    clearInterval(interval);
    if(date.getHours() === 8 && date.getMinutes() === 0) 
        counter = 26280000;
        postMessage("hello"+i);
        
    interval = setInterval(myFunction, counter);

var interval = setInterval(myFunction, counter);

    在Ur代码中使用web worker如下。

    var w;    
function startWorker() 
    if (typeof(Worker) !== "undefined") 
        if (typeof(w) == "undefined") 
            w = new Worker("demo_worker.js");
            w.onmessage = function(event) 
                window.print();
            ;
         else 
            document.getElementById("result").innerHTML = "Sorry, your browser does not support HTML5 Web Workers";

我想它会对你有所帮助。

【讨论】：

【参考方案2】：

我试着给出我的答案希望它可以帮助：

    function startJobAt(hh, mm, code) 
        var interval = 0;
        var today = new Date();
        var todayHH = today.getHours();
        var todayMM = today.getMinutes();
        if ((todayHH > hh) || (todayHH == hh && todayMM > mm)) 
            var midnight = new Date();
            midnight.setHours(24,0,0,0);
            interval = midnight.getTime() - today.getTime() +
                    (hh * 60 * 60 * 1000) + (mm * 60 * 1000);
         else 
            interval = (hh - todayHH) * 60 * 60 * 1000 + (mm - todayMM) * 60 * 1000;
        
        return setTimeout(code, interval);

使用 startJobAt，您只能执行一个您希望执行的任务，但如果您需要重新运行您的任务，则由您决定是否调用 startJobAt。

再见

附言

如果您需要自动打印操作，没有对话框，请考虑为 mozilla 使用 http://jsprintsetup.mozdev.org/reference.html 插件或为其他浏览器使用其他插件。

【讨论】：

【参考方案3】：

JavaScript 不是 的工具。如果您想在每天的特定时间运行某些东西，那么您几乎肯定会寻找在本地运行的东西，例如 python 或 applescript。

但是，让我们考虑一下 JavaScript 是您唯一的选择。有几种方法可以做到这一点，但我会给你最简单的。

首先，您必须创建一个new Date() 并设置检查间隔以查看小时是否为 8（对于上午 8 点）。

这将检查每分钟（60000 毫秒）是否是八点：

window.setInterval(function() // Set interval for checking
    var date = new Date(); // Create a Date object to find out what time it is
    if(date.getHours() === 8 && date.getMinutes() === 0) // Check the time
        // Do stuff
    
, 60000); // Repeat every 60000 milliseconds (1 minute)

它不会在准确 8 点钟执行（除非您立即开始运行它），因为它正在检查每分钟一次。您可以尽可能地减少间隔以提高检查的准确性，但这有点过头了：它将检查 每分钟 每小时 每天 看看是否是 8 点。

检查的强度是由于 JavaScript 的性质：对于这类事情有更好的语言和框架。由于 JavaScript 会在您加载网页时在网页上运行，因此它并不意味着处理持久的、扩展的任务。

还要意识到，这需要在其上执行的网页打开。也就是说，如果页面未打开并每分钟进行计数和检查，您将无法在每天早上 8 点执行预定操作。

您说您已经每五秒刷新一次页面：如果这是真的，您根本不需要计时器。每次刷新页面时检查一下：

var date = new Date(); // Create Date object for a reference point
if(date.getHours() === 8 && date.getMinutes() === 0 && date.getSeconds() < 10) // Check the time like above
   // Do stuff

这样，您还必须检查秒数，因为您每五秒刷新一次，因此您会得到重复的任务。

话虽如此，您可能想要执行this 之类的操作，或者为 OS X 上的计划任务编写 Automator 工作流程。

如果您需要更多与平台无关的东西，我会认真考虑查看Python 或Bash。

作为更新，JavaScript for Automation 是在 OS X Yosemite 中引入的，它似乎提供了一种在这类事情上使用 JavaScript 的可行方法（尽管显然你没有在相同的上下文中使用它；Apple 只是为您提供在本地使用另一种脚本语言的界面）。

如果你在 OS X 上并且真的想使用 JavaScript，我认为这是要走的路。

截至本文撰写时（约塞米蒂向公众发布约 2 个月后），上面链接的发行说明似乎是唯一现有的文档，但它们值得一读。您还可以查看javascript-automation 标签中的一些示例。

我还发现JXA Cookbook 非常很有帮助。

您可能需要稍微调整此方法以适应您的特定情况，但我将提供一个总体概述。

    在 Automator 中创建一个空白应用程序。 打开 Automator.app（它应该在您的 Applications 目录中）并创建一个新文档。 从对话框中选择“应用程序”。 添加一个 JavaScript 动作。 下一步是实际添加将要执行的 JavaScript。为此，首先将侧边栏中的“运行 JavaScript”操作添加到工作流。

    编写 JavaScript。

    这是您在继续之前必须知道要做什么的地方。根据您提供的内容，我假设您想在 Safari 中加载的页面上执行 window.print()。您可以这样做（或者，更一般地说，在 Safari 选项卡中执行任意 JS）：

    var safari = Application('Safari');
safari.doJavaScript('window.print();',  in: safari.windows[0].currentTab );
    您可能需要根据您的设置调整要访问的windows。 保存应用程序。 将文件作为应用程序保存（File -&gt; Save 或 ⌘+S）到您可以找到的位置（或 iCloud）。 安排它运行。 打开日历（或 iCal）。 创建一个新事件并给它一个可识​​别的名称；然后，将时间设置为所需的运行时间（在本例中为 8:00 AM）。 将活动设置为每天重复（或每周、每月等 - 无论您希望它运行的频率如何）。 将警报（或警报，取决于您的版本）设置为自定义。 选择“打开文件”并选择您保存的应用程序文件。 为警报时间选项选择“在事件发生时”。

就是这样！您在应用程序文件中编写的 JavaScript 代码将在每次设置为运行该事件时运行。如果需要，您应该能够返回到 Automator 中的文件并修改代码。

【讨论】：

@Christophe 怎么样？如果您指的是它不会在确切 8:00 运行，它会在那一分钟的某个时间运行。如果 OP 想要更精确，她/他可以减少间隔，但它是矫枉过正。 注意：这将在上午 8 点后最多 60 秒触发。 @Christophe，是的，这确实每天早上 8 点运行（只要页面打开），因为间隔没有取消。 我指的是除非用户在特定时间确实打开了页面，否则 JavaScript 不会运行。恐怕 OP 将客户端脚本与预定作业混淆了。 @user3738622 恐怕这将是一个完全不同的问题：我不懂 Perl，所以这将是一个不同的主题，有不同的答案。 这是对Javascript的一个很好的使用。将 Node.js 用于此类本地任务。【参考方案4】： 
function every8am (yourcode) 
    var now = new Date(),
        start,
        wait;

    if (now.getHours() < 7) 
        start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0);
     else 
        start = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 8, 0, 0, 0);
    

    wait = start.getTime() - now.getTime();

    if(wait <= 0)  //If missed 8am before going into the setTimeout
        console.log('Oops, missed the hour');
        every8am(yourcode); //Retry
     else 
        setTimeout(function ()  //Wait 8am
            setInterval(function () 
                yourcode();
            , 86400000); //Every day
        ,wait);

使用它：

var yourcode = function () 
        console.log('This will print evryday at 8am');
    ;
every8am(yourcode);

基本上，获取现在的时间戳，如果及时运行，则为今天早上 8 点的时间戳，或者明天早上 8 点，然后设置 24h 的间隔每天运行代码。您可以通过将变量 start 设置为不同的时间戳来轻松更改它将运行的小时数。

我不知道这样做会有什么用处，正如其他人指出的那样，您需要整天打开页面才能看到这种情况发生......

另外，由于您每 5 秒刷新一次：

function at8am (yourcode) 
    var now = new Date(),
        start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0);

    if (now.getTime() >= start.getTime() - 2500 && now.getTime() < start.getTime() + 2500) 
        yourcode();

以与 every8am 相同的方式运行，查看 8am 是提前还是落后 2.5 秒，如果是则运行。

【讨论】：

【参考方案5】：

我写了一个函数

允许以秒为单位表示延迟，new Date() 格式和string 的new Date 格式 允许取消计时器

代码如下：

"use strict"
/**
  This function postpones execution until given time.
  @delay might be number or string or `Date` object. If number, then it delay expressed in seconds; if string, then it is parsed with new Date() syntax. Example:
      scheduleAt(60, function() console.log("executed"); 
      scheduleAt("Aug 27 2014 16:00:00", function() console.log("executed"); 
      scheduleAt("Aug 27 2014 16:00:00 UTC", function() console.log("executed"); 
  @code function to be executed
  @context @optional `this` in function `code` will evaluate to this object; by default it is `window` object; example:
      scheduleAt(1, function(console.log(this.a);, a: 42)
  @return function which can cancel timer. Example:
      var cancel=scheduleAt(60, function(console.log("executed."););
      cancel();
      will never print to the console.
*/

function scheduleAt(delay, code, context) 

    //create this object only once for this function
    scheduleAt.conv = scheduleAt.conv || 
        'number': function numberInSecsToUnixTs(delay) 
            return (new Date().getTime() / 1000) + delay;
        ,
        'string': function dateTimeStrToUnixTs(datetime) 
            return new Date(datetime).getTime() / 1000;
        ,
        'object': function dateToUnixTs(date) 
            return date.getTime() / 1000;
        
    ;

    var delayInSec = scheduleAt.conv[typeof delay](delay) - (new Date().getTime() / 1000);

    if (delayInSec < 0) throw "Cannot execute in past";

    if (debug) console.log('executing in', delayInSec, new Date(new Date().getTime() + delayInSec * 1000))

    var id = setTimeout(
        code,
        delayInSec * 1000
    );

    //preserve as a private function variable setTimeout's id
    return (function(id) 
        return function() 
            clearTimeout(id);
        
    )(id);

如下使用：

scheduleAt(2, function() 
    console.log("Hello, this function was delayed 2s.");
);

scheduleAt(
    new Date().toString().replace(/:\d2 /, ':59 '),
    function() 
        console.log("Hello, this function was executed (almost) at the end of the minute.")
    
);

scheduleAt(new Date(Date.UTC(2014, 9, 31)), function() 
    console.log('Saying in UTC time zone, we are just celebrating Helloween!');
)

【讨论】：

以上是关于网站（javascript等) 如何让网页里某图片被长按3秒后再等待6秒后跳转到某页面?的主要内容，如果未能解决你的问题，请参考以下文章

C#如何获得webbrowser网页里某元素所占用的位置坐标

我用html5 做了个手机网站 如何让图片本身100%放大

网页设计中如何让图片轮播

如何在内嵌网页中使用代理

如何在网页实现上传各种文件或图片视频等功能

网页代码图片显示问题！请高手进来看看