zoukankan      html  css  js  c++  java
  • 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能出现一次<script type="text/javascript"></script>标签,可是。同一个网页中经常须要多个JavaScript特效。

    本文在2014.11.10又作了改动。原因是笔者发现另外一种方法

    一、基本目标

    在网页中挂载两个JavaScript时钟。当中一个是每1秒走一次的正常时间,另外一个是每3秒才走一次的不正常时钟。仅仅是为了区分之后。来说明同一个网页中怎样实现多个JavaScript特效。


    二、制作过程

    方法一:

    <html>
    <head>
    <script type="text/javascript">
    function clocka() {
    			var time = new Date().toLocaleString();
    			document.getElementById("clocka").innerHTML = time;
    		}
    function a(){
    	clocka();
    	setInterval("clocka()", 1000);
    }
    function clockb() {
    			var time = new Date().toLocaleString();
    			document.getElementById("clockb").innerHTML = time;
    		}		
    function b(){
    	clockb();
    	setInterval("clockb()", 3000);
    }
    </script>
    </head>
    <body onLoad="a(),b()">
    <div id="clocka"></div>
    <div id="clockb"></div>
    </body>
    </html>

    先把要实现的那段特效的写到一个函数里,函数a(),b(),再通过body的onLoad。让其载入网页就立即去载入这段函数。

    至于clocka()与clockb()。是依据原来的JavaScript代码改写过来的。

    原来处于<body>中那段JavaScript代码例如以下:

    		<script type="text/javascript">
    		function clock() {
    			var time = new Date().toLocaleString();
    			document.getElementById("clock").innerHTML = time;
    		}
    		setInterval("clock()", 1000);
    		</script>


    方法二:

    就是在<script>不写入type类型,直接写type。只是这样的方法有一定的延迟性,特效是一个一个载入的。假设太多特效的话。效果会不好。

    可是编码的整洁性与直观性,完胜上面的方法。

    代码例如以下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script>
    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>twojs</title>
    </head>
    
    <body>
    <script>
    setInterval("clocka()", 1000);
    </script>
    <script>
    setInterval("clockb()", 3000);
    </script>
    <div id="clocka"></div>
    <div id="clockb"></div>
    </body>
    </html>
    

  • 相关阅读:
    EntityFramework 启用迁移 EnableMigrations 报异常 "No context type was found in the assembly"
    JAVA 访问FTP服务器示例(2)
    NuGet Package Manager 更新错误解决办法
    JAVA 访问FTP服务器示例(1)
    RemoteAttribute 的使用问题
    诡异的 javascript 变量
    javascript apply用法
    Babun 中文乱码
    GSM呼叫过程
    转站博客园
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6893136.html
Copyright © 2011-2022 走看看