同一个网页中实现多个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的几种方法
Oct 23 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php链表用法实例分析
2015/07/09 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python决策树分类算法学习
2017/12/22 Python
详解Python中where()函数的用法
2018/03/27 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
什么是封装
2013/03/26 面试题
什么是servlet链?
2014/07/13 面试题
护理专业本科生自荐信
2013/10/01 职场文书
大学生演讲稿范文
2014/01/11 职场文书
小学生寒假家长评语
2014/04/16 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
离婚案件答辩状
2015/05/22 职场文书
音乐剧猫观后感
2015/06/04 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python