Home > Article > Web Front-end > How to implement button click to jump in javascript
How to implement button click to jump in javascript
- 青灯夜游Original
- 2021-04-20 15:13:036322browse
Method: 1. Add the "onclick="location.href='url'"" statement to the button element to jump. 2. First bind the click event to the button element; then specify the function that will be executed when the click event is triggered; finally, in the execution function, use the "location.href" statement to set the jump function.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
Method 1: Use location.href directly on the button element to jump
<input type="submit" name="Submit" value="同意" onclick="location.href='http://www.php.cn'">
Method 2: Give Bind the click event to the button element and jump
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点点点</button>
<div></div>
<script>
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.addEventListener('click', function () {
// location.href = 'http://www.baidu.com';
var timer = 5;
setInterval(function () {
if (timer == 0) {
location.href = 'http://www.php.cn';
} else {
div.innerHTML = '你还有' + timer + '秒就可以跳转了';
timer--
}
},1000)
/* setInterval(function(){
div.innerHTML = '你还有' + timer + '秒就可以跳转了'
timer--;
},1000) */
});
</script>
</body>
</html>[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to implement button click to jump in javascript. For more information, please follow other related articles on the PHP Chinese website!