当 html 代码中的文本元素出现时，如何在 chrome 控制台中启动一个函数？

Question

我尝试编写一个脚本，在特定时间触发对在线网站（不是我的网站）的特定元素的点击。具体时间以网站内运行的倒计时给出。

通过阅读该网站的 html 文件，代码（在通用时间捕获）是这样的：

<div class="thecountdowndown" id="counting"><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>41</div><small>seconds</small></div></div>

image of the code of the counter。所以它基本上显示了一个计时器，每秒 html 代码更改。

我的问题是我不知道如何编写一个函数来检查此处的代码何时出现在 html 中！这个不工作：

function searchTree(element, matchingTitle){
     if(element.title == matchingTitle){
          return element;
     }else if (element.children != null){
          var i;
          var result = null;
          for(i=0; result == null && i < element.children.length; i++){
               result = searchTree(element.children[i], matchingTitle);
          }
          return result;
     }
     return null;
}

我可能应该使用 var 和一个 "While" 循环：当 var 的值为 0 时，函数继续搜索。但我不知道如何编写 "searching" 函数。

总而言之，我想不出在"searching"函数检测到代码出现后启动"click"函数的方法。

谁能帮帮我？

更新：换句话说，该网站上有一个从午夜开始的倒计时。现在，我如何（通过使用 chrome 控制台）在倒计时显示时间“05:45:00”时单击按钮？我要按的按钮在倒计时的同一页。

Answer 1

// just for simulating change in counter on HTML - already on website / dont inject through dev-tools
var seconds = 45;
setInterval(() => {
  document.getElementById("fakeChange").innerHTML = seconds--;
}, 1000);

// is injected through dev-tools / console by yourself
var elIdToObserve = 'counting';
var elIdToSimulateClick = 'submit';
// get the following value by manually calling: 
// console.log(document.getElementById(elIdToObserve).innerHTML)
var waitForContentAppearing = `
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div id="fakeChange">41</div><small>seconds</small></div>
`; // change this to your target content i.e. seconds 46 to 41

setInterval(() => {
  if(document.getElementById(elIdToObserve).innerHTML === waitForContentAppearing) {
    // Add you own instructions here that should be executed

    // Since you mentioned there is a button within the webpage I added a button with id that gets a automated click - the button I added does do something i.e. for visualization I made the button show some text indicating it has been "clicked".
    document.getElementById(elIdToSimulateClick).click();
  }
}, 500);

<!-- comes from existing website -->
<div class="thecountdowndown" id="counting">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div id="fakeChange">46</div><small>seconds</small></div>
</div>
<button id="submit" onclick="document.getElementById('simulationClick').innerHTML = 'Simulated click at timestamp '+Date.now()">Send</button>
<div id="simulationClick">
</div>

您可能还需要通过类 select 来获取您想要点击的按钮。

Answer 2

您可能需要稍微调整一下，但这可能会有所帮助。

const clickNow = function(targetElement, elementToClick) {

//May have to play with the selector to get node that holds the value
const timer = document.querySelector(targetElement);
setInterval(()=>{

    if(timer.value === "5:40:01 pm") {
        clickButton(elementToClick);
    }else {
        console.log("no yet", timer.value,"5:40:01 pm");
    }

},100)


    function clickButton(elementToClick) {
        const toClick = document.querySelector(elementToClick);
        toClick.click();
    }
}

clickNow("input[name='display2']",".t");

当 html 代码中的文本元素出现时，如何在 chrome 控制台中启动一个函数？

How to start a function in chrome console when a text element in the html code appear?

html

javascript

full-text-search

countdowntimer