такие как Key Wizard, могут освободить наши руки и помочь нам автоматически выполнять многие задачи. Во многих случаях это может значительно повысить производительность.
В этой статье будет продемонстрировано: Использование JavaScript для реализации «мастера кнопок» для демонстрации автоматического завершения щелчка, фокусировки, ввода и других операций.
Как показано на анимации выше, на странице автоматически выполняются следующие операции:
1. Нажмите две кнопки с интервалом в одну секунду.
2. Установите фокус на поле ввода.
3. Введите текст в поле ввода.
4. Нажмите, чтобы открыть окно; ссылка;
принцип. Это несложно, просто возьмите элемент и выполните клик, фокус и другие события.
Есть две трудности:
1. Для элементов без идентификатора и имени нельзя использовать getElementById и getElementByName. Как их найти.
Решение: используйте querySelectorAll для получения всех элементов на странице, а затем используйте сопоставление исходного кода, чтобы точно найти их. элементы. Код выглядит следующим образом:
2. Как установить задержку: После нажатия на местоположение подождите несколько секунд, прежде чем выполнять следующую операцию.
Решение: используйте setTimeOut и функции обратного вызова. Код выглядит следующим образом:
. В соответствии с описанными ранее принципами подготовьте функции щелчка, фокусировки и назначения следующим образом:
При вызове передайте исходный код, значение задержки и функцию обратного вызова.
То есть: воздействовать на элементы указанного исходного кода, затем задерживать на определенный период времени, а затем выполнять функцию обратного вызова.
Часть исходного кода можно получить в средстве просмотра страниц, как показано ниже:
приведен здесь, а также полный код приведенного выше примера. Сохраните его как html и запустите.
<html>
<тело>
<скрипт>
document.body.addEventListener("click", function(e) {
console.log('Нажмите:',e.originalTarget);
});
</скрипт>
<h1>Мастер кнопок версии JS</h1>
<дел>
1. Кнопка:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 был нажат');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 был нажат');">2</button>
<br>
<br>
2. Поле ввода:
<input type="text" value="">
<br>
<br>
3. Ссылка: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<час>
<button onclick="fun1();">Начать автоматическое выполнение</button>
<br>
Выполните следующие действия по порядку:<br>
1. Нажмите первую и вторую кнопки 2. Установите фокус для поля ввода 3. Установите значение для поля ввода: abc 4. Щелкните ссылку;
<br>
</тело>
<скрипт>
//Событие клика//Параметры:
//outer_html: исходный код элемента, по которому нужно щелкнуть //delay: задержка //call_back: функция обратного вызова function click(outer_html, Delay, call_back){
//Получаем все элементы страницы var all_elements = document.querySelectorAll('*');
//Обход элементов for(i=0; i<all_elements.length; i++){
//Находим элементы, соответствующие условиям if(all_elements[i].outerHTML==outer_html){
//Нажмите all_elements[i].click();
}
}
если (задержка && обратный вызов) {
//Выполняем функцию обратного вызова setTimeout(call_back, Delay) через сколько миллисекунд прошло
}
};
//Устанавливаем фокус, то есть выбираем //Параметры:
//outer_html: исходный код элемента //delay: задержка //call_back: функция обратного вызова function focus(outer_html, Delay, call_back){
//Получаем все элементы страницы var all_elements = document.querySelectorAll('*');
//Обход элементов for(i=0; i<all_elements.length; i++){
//Находим элементы, соответствующие условиям if(all_elements[i].outerHTML==outer_html){
//Установить фокус all_elements[i].focus();
}
}
если (задержка && обратный вызов) {
//Выполняем функцию обратного вызова setTimeout(call_back, Delay) через сколько миллисекунд прошло
}
};
//Установка функции содержимого setvalue(outer_html, type, value, Delay, call_back){
//Получаем все элементы страницы var all_elements = document.querySelectorAll('*');
//Обход элементов for(i=0; i<all_elements.length; i++){
//Находим элементы, соответствующие условиям if(all_elements[i].outerHTML==outer_html){
//Нажмите all_elements[i][type] = value;
}
}
если (задержка && обратный вызов) {
//Выполняем функцию обратного вызова setTimeout(call_back, Delay) через сколько миллисекунд прошло
}
};
//Нажмите кнопку function fun1(){
//Исходный код элемента, по которому нужно щелкнуть var external_html = `<button style="width: 100px; height:100px;" onclick="alert('1 был нажат');">1</button>`;
нажмите (outer_html, 1000, fun2);
}
//Нажмите кнопку function fun2(){
//Исходный код элемента, по которому нужно щелкнуть var external_html = `<button style="width: 100px; height:100px;" onclick="alert('2 было нажато');">2</button>`;
нажмите (outer_html, 1000, fun3);
}
//Установим фокус и значение для функции ввода fun3(){
//Исходный код элемента, по которому нужно щелкнуть var external_html = `<input type="text" value="">`;
фокус (outer_html);
setvalue(outer_html, «value», «abc», 1000, call_back_function)
}
//Нажмите ссылку на функцию call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
нажмите (out_html);
console.log("Автоматический щелчок завершен")
}
</скрипт>
</html> JavaScript с открытым и прозрачным позволяет легко понять функциональную логику, а также может быть изменен по желанию. Если вы хотите повысить безопасность кода, вам следует защитить свой код с помощью шифрования. Например, вы можете использовать JShaman, профессиональный инструмент шифрования кода JavaScript. Код JavaScript в приведенном выше полном исходном коде после шифрования с помощью JShaman примет следующую форму, и на его использование это никак не повлияет:
Примечание. Левая сторона — это исходный код, а правая — зашифрованный код.
Рекомендации по теме: [Видеоурок по JavaScript]
Цель вышеизложенного — научить вас использовать JavaScript для реализации «мастера кнопок»! Для получения более подробной информации, пожалуйста, обратите внимание на другие статьи по теме на китайском сайте php!
