同一个网页中实现多个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网页中的(运行代码)功能实现思路
Feb 04 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
动态加载jQuery的方法
Jun 16 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
类似框架的js代码
2006/11/09 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
javascript实现画板功能
2020/04/12 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python读取xlsx的方法
2018/12/25 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
个人评价范文分享
2014/01/11 职场文书
七年级历史教学反思
2014/02/05 职场文书
德语专业求职信
2014/03/12 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Python&Matlab实现樱花的绘制
2022/04/07 Python