同一个网页中实现多个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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
浅谈javascript中return语句
Jul 15 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
Vue项目中如何引入icon图标
Mar 28 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php生成微信红包数组的方法
2019/09/05 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
简单了解django缓存方式及配置
2019/07/19 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python脚本第一行如何写
2020/08/30 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
高中体育教学反思
2014/01/24 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
运输公司工作总结
2015/08/11 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书