【JavaScript】在同一个网页中实现多个JavaScript特效

在网页中,如果出现两次<script type="text/javascript"></script>标签,所有的JavaScipt脚本都不会再生效,只能出现一次<script type="text/javascript"></script>标签,但是,同一个网页中常常需要多个JavaScript特效。

一、基本目标

在网页中挂载两个JavaScript时钟,其中一个是每1秒走一次的正常时间,另外一个是每3秒才走一次的不正常时钟,只是为了区分之后,来说明同一个网页中如何实现多个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>
时间: 2024-08-24 22:18:25

【JavaScript】在同一个网页中实现多个JavaScript特效的相关文章

JavaScript例子1-给网页中所有&lt;p&gt;元素添加onclick事件

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <script type="text/javascript"> 8 window.onload = function() { 9 var items = document.getElementsByTagName(&

JavaScript强化教程——JQuery中的DOM编程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 JavaScript强化教程--JQuery中的DOM编程 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 DOM编程 ---------------------------- js中DOM编程   创建一个标签对象     var p=document.createElement("p"

Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 JavaScript 的运行情况

1 概述 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 JavaScript 的运行情况,包括:执行覆盖率.执行行数.是否存在执行或语法错误等信息,当你对一个目标网页使用 Tracker,该网页的上方将加载进来一个 Tracker 导航栏. 不用安装,快速开始 也欢迎体验桌面客户端版 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 Ja

在UIWebView中间接调用网页中的javascript代码获得想要的值

日记和一些废话: 今天在使用webView加载网页后, 发现网页中的点击事件是用js代码实现的, 可是怎么点击都没有反应, 而且我主要是想获取到点击事件转到的url , 后来发现html中又这么一段代码: document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) function openPage(pageUrl) { if(bridge) { bridge.send(pageU

JavaScript基础 每1.5秒钟在网页中出现一个太阳的图片 整齐排列

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript运行网页中的代码,保存网页中的代码

<!DOCTYPE html> <html> <head> <title>在网页中运行代码,保存代码</title> <meta charset="utf-8"> </head> <body> <textarea id="code" style="width: 500px;height: 300px"> <html> <h

javascript在网页中使用以及注意事项

一.<script>标签的解析: <script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下几个属性: 1.charset:可选.表示通过 src 属性指定的字符集.被大多数浏览器忽略,很少有人用. 2.defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.大多数浏览器不支持,很少用.可以将JS代码放在html内容的后面,这样可实现延时加载 3.language:已废弃.原来用于代码使用的脚本语言.被大

如何将 JavaScript 代码添加到网页中,以及 &lt;script&gt; 标签的属性

Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了.我们将在本教程的下一部分中专注于浏览器中的 JavaScript. 首先,让我们看看如何将脚本添加到网页上.对于服务器端环境(如 Node.js),你只需要使用诸如

javaScript 实现倒计时 + 获取网页中的文字

一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var count