Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod)-html tutorial-php.cn

Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod)

奋力向前

Lepaskan： 2021-08-16 15:37:28

ke hadapan

7853 orang telah melayarinya

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.

Artikel HTML5: 5 cara untuk mencapai lonjakan halaman (perkongsian kod)

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>

Salin selepas log masuk

Kelebihan: Mudah
Keburukan: Tidak boleh digunakan dalam Struts Tiles

2. Pelaksanaan javascript

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href=&#39;hello.html&#39;;
// 以下方式定时跳转
setTimeout("javascript:location.href=&#39;hello.html&#39;", 5000); 
</script>

Salin selepas log masuk

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=&#39;hello.html&#39;; 
} 
</script>

Salin selepas log masuk

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(&#39;totalSecond&#39;).textContent; 
setInterval("redirect()", 1000); 
function redirect() 
{ 
document.getElementById(&#39;totalSecond&#39;).textContent = --second; 
if (second < 0) location.href = &#39;hello.html&#39;; 
} 
</script>

Salin selepas log masuk

5 >

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText"; 
} else{ 
document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent"; 
} 
</script>

Salin selepas log masuk

Kod lengkap dengan 3 dan 4

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript"> 
var second = document.getElementById(&#39;totalSecond&#39;).textContent; 

if (navigator.appName.indexOf("Explorer") > -1)  { 
	second = document.getElementById(&#39;totalSecond&#39;).innerText; 
} else { 
	second = document.getElementById(&#39;totalSecond&#39;).textContent; 
} 

setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
	location.href = &#39;hello.html&#39;; 
} else { 
	if (navigator.appName.indexOf("Explorer") > -1) { 
		document.getElementById(&#39;totalSecond&#39;).innerText = second--; 
	} else { 
		document.getElementById(&#39;totalSecond&#39;).textContent = second--; 
	} 
} 
} 
</script>

Salin selepas log masuk

Pembelajaran yang disyorkan:

Tutorial video HTML

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!