Rumah >hujung hadapan web >html tutorial >Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod)
Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod)
- 奋力向前ke hadapan
- 2021-08-16 15:33:017857semak imbas
Dalam artikel sebelumnya "Ajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML", saya memperkenalkan anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML. Artikel berikut akan memperkenalkan kepada anda cara menggunakan HTML5 untuk mencapai lompatan halaman Ia mempunyai nilai rujukan tertentu Rakan yang memerlukan saya harap ia akan membantu anda.
Lima contoh disenaraikan di bawah untuk menerangkan secara terperinci Fungsi utama contoh ini ialah: selepas 5 saat, melompat secara automatik ke direktori dalam direktori yang sama. hello.html (ubah suai mengikut keperluan anda sendiri) fail.
1. Pelaksanaan html
<head> <!-- 以下方式只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" content="10"> <!-- 以下方式定时转到其他页面 --> <meta http-equiv="refresh" content="5;url=hello.html"> </head>
Kelebihan: Mudah
Keburukan: Tidak boleh digunakan dalam Struts Tiles
2. Pelaksanaan javascript
<script language="javascript" type="text/javascript">
// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000);
</script>Kelebihan: fleksibel dan boleh digabungkan dengan lebih banyak fungsi lain
Keburukan: dipengaruhi oleh pelayar yang berbeza
3 , digabungkan dengan pelaksanaan javascript bagi timbal balik (IE)
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='hello.html';
}
</script> Kelebihan: lebih mesra pengguna
Kelemahan: firefox tidak menyokong (firefox tidak menyokong atribut innerText span, p, dsb. .)
4 Digabungkan dengan pelaksanaan javascript bagi timbal balik (firefox)
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href = 'hello.html';
}
</script>5 >
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
</script>Kod lengkap dengan 3 dan 4
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById('totalSecond').innerText;
} else {
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
location.href = 'hello.html';
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = second--;
} else {
document.getElementById('totalSecond').textContent = second--;
}
}
}
</script>Pembelajaran yang disyorkan: Atas ialah kandungan terperinci Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!