Automation tools such as Key Wizard can free our hands and help us complete many tasks automatically. In many scenarios, it can greatly improve productivity.
This article will demonstrate: Using JavaScript to implement a "button wizard" to demonstrate the automatic completion of click, focus, input and other operations.
As shown in the animation above, the following operations are automatically performed on the page:
1. Click two buttons one second apart;
2. Set focus to the input box;
3. Enter text in the input box;
4. Click to open the link;
principle It's not complicated, just get the element and execute click, focus and other events.
There are two difficulties:
1. For elements without ID and Name, you cannot use getElementById and getElementByName. How to locate them?
The solution is: use querySelectorAll to obtain all elements on the page, and then use source code matching to accurately locate the elements. The code is as follows:
2. How to set the delay: After clicking a location, wait a few seconds before performing the next operation.
The solution is: use setTimeOut and callback functions. The code is as follows:
. According to the principles described earlier, prepare click, focus, and assignment functions, as follows:
When calling, pass in the source code, delay value, and callback function.
That is: operate on the elements of the specified source code, then delay for a certain period of time, and then execute the callback function.
The source code part can be obtained in the page viewer, as shown below:
is given here and the complete code of the above example is given. Save it as html and run it.
<html>
<body>
<script>
document.body.addEventListener("click", function(e) {
console.log('Click:',e.originalTarget);
});
</script>
<h1>JS version button wizard</h1>
<div>
1. Button:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>
<br>
<br>
2. Input box:
<input type="text" value="">
<br>
<br>
3. Link: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<hr>
<button onclick="fun1();">Start automatic execution</button>
<br>
Do the following in order:<br>
1. Click the first and second buttons; 2. Set the focus for the input box; 3. Set the value for the input box: abc; 4. Click the link;
<br>
</body>
<script>
//Click event//Parameters:
//outer_html: source code of the element to be clicked //delay: delay //call_back: callback function function click(outer_html, delay, call_back){
//Get all elements of the page var all_elements = document.querySelectorAll('*');
//Traverse elements for(i=0; i<all_elements.length; i++){
//Match elements that meet the conditions if(all_elements[i].outerHTML==outer_html){
//Click all_elements[i].click();
}
}
if(delay && call_back){
//Execute the callback function setTimeout(call_back, delay) after how many milliseconds have passed
}
};
//Set focus, that is, select //Parameters:
//outer_html: element source code //delay: delay //call_back: callback function function focus(outer_html, delay, call_back){
//Get all elements of the page var all_elements = document.querySelectorAll('*');
//Traverse elements for(i=0; i<all_elements.length; i++){
//Match elements that meet the conditions if(all_elements[i].outerHTML==outer_html){
//Set focus all_elements[i].focus();
}
}
if(delay && call_back){
//Execute the callback function setTimeout(call_back, delay) after how many milliseconds have passed
}
};
//Set content function setvalue(outer_html, type, value, delay, call_back){
//Get all elements of the page var all_elements = document.querySelectorAll('*');
//Traverse elements for(i=0; i<all_elements.length; i++){
//Match elements that meet the conditions if(all_elements[i].outerHTML==outer_html){
//Click all_elements[i][type] = value;
}
}
if(delay && call_back){
//Execute the callback function setTimeout(call_back, delay) after how many milliseconds have passed
}
};
//Click button function fun1(){
//The source code of the element to be clicked var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
click(outer_html, 1000, fun2);
}
//Click button function fun2(){
//The source code of the element to be clicked var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
click(outer_html, 1000, fun3);
}
//Set focus and value for input function fun3(){
//The source code of the element to be clicked var outer_html = `<input type="text" value="">`;
focus(outer_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//Click the link function call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
click(out_html);
console.log("Automatic click completed")
}
</script>
</html> JavaScript with open and transparent can easily understand the functional logic and can also be modified at will. If you want to improve code security, you should protect your code with encryption. For example, you can use JShaman, a professional JavaScript code obfuscation encryption tool. The JavaScript code in the complete source code above will become the following form after being encrypted by JShaman, and its use will not be affected in any way:
Note: The left side is the original code and the right side is the encrypted code.
Related recommendations: [JavaScript Video Tutorial]
The above is to teach you how to use JavaScript to implement a "button wizard"! For more details, please pay attention to other related articles on the php Chinese website!
