Este artigo descreve o método de implementar vários efeitos especiais JavaScript na mesma página da web. Compartilhe para sua referência. A análise específica é a seguinte:
De um modo geral, se a tag <script type = "text/javascript"> </script> aparecer duas vezes, todos os scripts JavaScript não entrarão em vigor novamente e apenas uma vez que <script type = "text/javascript"> </script> tags aparecerão. No entanto, vários efeitos especiais JavaScript são frequentemente necessários na mesma página da web.
1. Objetivos básicos
Monte dois relógios JavaScript na página da web, um dos quais é o tempo normal que desaparece a cada 1 segundo, e o outro é um relógio anormal que desaparece a cada 3 segundos. É apenas para distingui -lo e explicar como implementar vários efeitos especiais JavaScript na mesma página da web. O efeito é mostrado na figura abaixo:
2. Processo de produção
Método 1:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
function clocka () {
var time = new Date (). tolocalestring ();
Document.getElementById ("Clocka"). INnerHtml = Time;
}
função a () {
clocka ();
setInterval ("clocka ()", 1000);
}
function clockb () {
var time = new Date (). tolocalestring ();
document.getElementById ("Clockb"). INnerHTML = Time;
}
função b () {
relógio ();
setInterval ("clockb ()", 3000);
}
</script>
</head>
<corpo onload = "a (), b ()">
<div id = "clocka"> </div>
<div id = "Clockb"> </div>
</body>
</html>
Primeiro, escreva o efeito especial a ser implementado em uma função, funções A (), B () e, em seguida, use o Onload do corpo para carregar a página da Web e carregar essa função imediatamente.
Quanto a clocka () e clockb (), eles são reescritos com base no código JavaScript original. O código JavaScript que estava originalmente em <body> é o seguinte:
Copie o código da seguinte forma: <script type = "text/javascript">
function clock () {
var time = new Date (). tolocalestring ();
document.getElementById ("relógio"). innerhtml = time;
}
setInterval ("Clock ()", 1000);
</script>
Método 2:
Isso significa não escrever tipo <SCRIPT>, mas o tipo é escrito diretamente. No entanto, esse método tem um certo atraso. Os efeitos especiais são carregados um por um. Se houver muitos efeitos especiais, o efeito será ruim.
No entanto, a limpeza e a intuitividade da codificação são melhores que o método acima.
O código é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Cript>
function clocka () {
var time = new Date (). tolocalestring ();
Document.getElementById ("Clocka"). INnerHtml = Time;
}
function clockb () {
var time = new Date (). tolocalestring ();
document.getElementById ("Clockb"). INnerHTML = Time;
}
</script>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> doisjs </title>
</head>
<Body>
<Cript>
setInterval ("clocka ()", 1000);
</script>
<Cript>
setInterval ("clockb ()", 3000);
</script>
<div id = "clocka"> </div>
<div id = "Clockb"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.