同一个网页中实现多个JavaScript特效的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了同一个网页中实现多个JavaScript特效的方法。分享给大家供大家参考。具体分析如下:

一般来说,在网页中,如果出现两次<script type="text/javascript"></script>标签,所有的JavaScipt脚本都不会再生效,只能出现一次<script type="text/javascript"></script>标签,但是,同一个网页中常常需要多个JavaScript特效。

一、基本目标

在网页中挂载两个JavaScript时钟,其中一个是每1秒走一次的正常时间,另外一个是每3秒才走一次的不正常时钟,只是为了区分之后,来说明同一个网页中如何实现多个JavaScript特效。效果如下图所示:

同一个网页中实现多个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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 #Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 #Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 #Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
基于php缓存的详解
2013/05/15 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jquery禁用右键示例
2014/04/28 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue $router和$route的区别详解
2020/12/02 Vue.js
Python科学计算之Pandas详解
2017/01/15 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
cf收人广告词大全
2014/03/14 职场文书
工会换届选举方案
2014/05/21 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年财政局工作总结
2014/12/09 职场文书
师德先进个人材料
2014/12/20 职场文书
西湖英语导游词
2015/02/06 职场文书
升职自荐信范文
2015/03/27 职场文书