同一个网页中实现多个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代码
Oct 09 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 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+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python Process多进程实现过程
2019/10/22 Python
python enumerate内置函数用法总结
2020/01/07 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python学习之time模块的基本使用
2021/01/17 Python
IBatis持久层技术
2016/07/18 面试题
法院先进个人事迹材料
2014/05/04 职场文书
养牛场项目建议书
2014/05/13 职场文书
团队精神口号
2014/06/06 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server