同一个网页中实现多个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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
js 浏览器事件介绍
Mar 30 Javascript
jquery实现保存已选用户
Jul 21 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 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中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php微信开发之上传临时素材
2016/06/24 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
brook javascript框架介绍
2011/10/10 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
js html实现计算器功能
2018/11/13 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
小程序实现分类页
2019/07/12 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
利用python批量检查网站的可用性
2016/09/09 Python
浅谈五大Python Web框架
2017/03/20 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Django单元测试工具test client使用详解
2019/08/02 Python
python根据文本生成词云图代码实例
2019/11/15 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
执行总经理岗位职责
2014/02/03 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
安全生产月标语
2014/10/07 职场文书
2014年督导工作总结
2014/11/19 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
浅谈Python数学建模之线性规划
2021/06/23 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript