本篇内容介绍了“JavaScript怎么实现定时弹广告”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。
JavaScript被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript由数行可执行计算机代码组成。
JavaScript通常被直接嵌入HTML页面。
JavaScript是一种解释性语言(就是说，代码执行不进行预编译)。
JavaScript的组成：
核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
ECMAScript：语法，语句.
BOM：浏览器对象.
DOM：Document Object Model.操作文档中的元素和内容.
使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件作出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是连接外部JavaScript脚本文件，称为外链式。对他们的具体讲解如下：
(1)内嵌式，在HTML文档中，通过<script>标签引入，如下
<script type="text/javascript"> //此处为JavaScript代码 </script>
(2)外联式，在HTML文档中，通过<script src="">标签引入.js文件，如下：
<script src="1.js" type="text/javascript" charset="UTF-8"></script>
(1)在使用JavaScript时，需要遵循以下命名规范：
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function
JavaScript严格区分大小写。
(2)变量的声明
var 变量名; /JavaScript变量可以不声明，直接使用，默认值：undefined
(3)变量的赋值
var 变量名 = 值; //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
【基本类型】
Undefined，Undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。
Null，只有一个专用值null，表示空，一个占位符。值undefined实际上是从值null派生来的，因此ECMAScript把它们定义为相等的。
alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。
Boolean，有两个值true和false
Number，表示任意数字
String，字符串由双引号(")或单引号(')声明的。JavaScript没有字符类型
对变量或值调用typeof运算符将返回下列值之一：
undefined-如果变量是Undefined类型的
boolean-如果变量是Boolean类型的
number-如果变量是Number类型的
string-如果变量是String类型的
object-如果变量是一种引用类型或Null类型的
【引用类型】
引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
JavaScript是基于对象而不是面向对象。对象类型的默认值是null。
JavaScript提供众多预定义引用类型（内置对象）。
JavaScript运算符与java运算符基本一致。可以看我的java基础随笔
alert()：向页面中弹出一个提示框！！
innerHTML：向页面的某个元素中写一段内容，将原有的东西覆盖
document.write()：向页面中写内容
函数：实现一定功能的代码块，类似与java中的方法。关键字function，函数名自定义。
<script type="text/javascript">
//方式1：声明函数
function demo01(){
alert("案例1");
}
//方式1：调用函数
demo01();
//方式2：声明匿名函数
var demo02 = function(){
alert("案例2");
};
//方式2：调用函数
demo02();
</script>window.setInterval(code,millisec) 按照指定的周期(间隔)来执行函数或代码片段。
参数1：code必须。执行的函数名或执行的代码字符串。
参数2：millisec必须。时间间隔，单位：毫秒。
返回值：一个可以传递给window.clearinIerval()从而取消对code的周期性执行的值。
例如：
方式1：函数名， setInterval(show , 100);
方式2：函数字符串， setInterval(""show() , 100);window对象提供都是全局函数，调用函数时window可以省略。
window.setInterval()等效setInterval()
步骤1：为轮播图img标签添加id属性
<div style="width: 100%;"> <img id="imgId" src="img/1.jpg" width="100%"/> </div>
步骤2：编写js代码，页面加载触发指定函数
<script type="text/javascript">
//加载成功启动监听器，5秒执行一次
window.onload = function(){
setInterval(changeImage , 2000)
}
//在3张照片之间切换
var num = 1;
function changeImage(){
if(num >= 3){
num = 1;
}
var imageobj = document.getElementById("imgId");
imageobj.src = "img/"+ num++ +".jpg"
}
</script>setTimeout()在指定的毫秒数后调用函数或执行代码片段。
setTimeout(code,millisec) code 必需。要调用的函数或要执行的代码字符串。 millisec 必需。在执行代码前需等待的毫秒数。
setInterval() 以指定周期执行函数或代码片段。
clearInterval() 取消由setInterval()设置的timeout。
clearTimeout() 取消由setTimeout()方法设置的timeout。
获得或设置样式
obj.style.属性 获得指定"属性"的值。 obj.style.属性=值 给指定的"属性"设置内容。 如果属性由多个单词使用"-"连接，需要将"-"删除，并将后一个单词首字母大写。 例如：background-color 需要改成 backgroundColor
实例：
<div id="divId" style="height: 100px;width: 100px;margin: 10px;padding: 20px;background-color: red;">小灰灰</div>
<script type="text/javascript">
//1 获得div对象
var divObj = document.getElementById("divId");
//2 获得高度
// divObj.style.height 数据为"100px"
// 使用parseInt() , 将字符串"100px"转换成数字"100"
var height = window.parseInt(divObj.style.height);
//3 将原始高度翻倍，再设置给div。
divObj.style.height = height * 2 + "px";
</script>
步骤1：在页面中，添加广告位div，并设置页面加载事件
<body onload="init()"> <!-- 整体的DIV --> <div> <!-- 定时弹出广告的div --> <div id="divAd" style="width: 99%;display: none;"> <img src="img/1.jpg" width="100%"/> </div> </div> </body>
步骤2：编程JS实现
<!-- 在html页面中引入js文件 --> <script src="js/ad.js"> </script>
ad.js代码
var time;
function init(){
//设置定时操作
time = setInterval("showAd()",5000);
}
function showAd(){
//获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display = "block";
//清除之前的定时操作
clearInterval(time);
//重新设置一个定时：5秒钟隐藏
time = setInterval("hideAd()",5000);
}
function hideAd(){
//获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display = "none";
clearInterval(time);
}DOM Window
DOM Navigator
DOM Screen
DOM History
DOM Location
方法：定时器
setInterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()：取消由setInterval() 设置的timeout。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
clearTimeout()：取消由setTimeout() 方法设置的timeou。
方法：消息框
alert():显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的确认框。
prompt()：xian's可提示用户输入的提示框。
Window尺寸
1) IE9 (含，及以上)，Chrome、 Firefox 等其他浏览器获得方式
windowinnerHeight -浏览器窗口的内部高度
windowinnerWidth-浏览器窗口的内部宽度
2) Internet Explorer8、7、6、5
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document. body.clientW idth
兼容所有浏览器的JS实现方案：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
href属性：设置或返回完整的URL。
hash：设置或返回从井号(#) 开始的URL (锚)。
host：设置或返回主机名和当前URL 的端口号。
hostname：设置或返回当前URL 的主机名。
href：设置或返回完整的URL。
pathname：设置或返回当前URL的路径部分。
port：设置或返回当前URL 的端口号。
protocol：设置或返回当前URL的协议。
search：设置或返回从问号(?) 开始的URL (查询部分)。
<script type="text/javascript"> function change () f location.href = "http: / /www. ithe ima. com" ; ) </script> <input type="button"' value="5ft"onclick="change()"/>
go()方法：跳转到指定页面
go(-1)：加载前一个链接，等效back()
go(1)：加载后一个链接，等效forward()
back():加载history 列表中的前一个URL。
forward():加载history 列表中的下一个URL。
go():加载history 列表中的某个具体页面。
innerHTML-HTML元素的内部文本
获得：document.getElementById("divId").innerHTML
设置：document.getElementById("divId").innerHTML = "...."提供函数val(objId)获得指定id属性对应元素value的值
/**
* 获得二指定元素value属性的值
* 例如：var loginName = val("loginnameId");
*/
function val (objId) f
return document.getElementById(objId).value;
)当标签没有验证通过时，给出提示信息。如果校验通过隐藏错误提示信息
/**
* 2.1 显示错误提示信息
* 例如：showTip("loginnameIdMsg","用户名不能为空");
*/
function showTip(errObjId, text ) {
//获得错误提示对象，并设置和显示
var showObj = document.getElementById(errObjId) ;
showObj.innerHTML = text;
showObj.style.display = "block" ;
}
/**
* 2.2 显示错误提示信息
*/
function hideTip() (
var showObj = document . getEl ementById (errObjId) ;
showObj.innerHTML = "";
showObj.style.display = "none";
}/**
* 3 获得焦点
*/
function focus (objId) {
//指定标签获得焦点
document。getElementById(objId).focus();
}常见事件：
onload：某个页面或图像被完成加载
onsubmit：提交按钮被点击
onclick：鼠标点击某个对象
ondblclick：鼠标双击某个对象
onblur：元素失去焦点
onfocus：元素获得焦点
onchange：用户改变域的内容
onkeydown：某个键盘的键被按下
onkeypress：某个键盘的键被按下或按住
onkeyup：某个键盘的键被松开
onmousedown：某个鼠标按键被按下
onmouseup：某个鼠标按键被松开
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开
onmousemove：鼠标被移动
event属性：
clientX：返回当事件被触发时，鼠标指针的水平坐标。
clientY：返回当事件被触发时，鼠标指针的垂直坐标。
keyCode：返回当事件被触发时，键盘输入ASCII码。
event方法：
preventDefault()：阻止浏览器默认行为
stopPropagation()：阻止事件的传播
阻止浏览器默认行为
<a href="http://www.baidu.com" onclick="one() ">百度</a><br/>
<a href="http://www.taobao.com" onclick=" return two() ">淘宝</a><br/>
<script type="text/javascript">
function one () {
alert("我之后，百度官网継銕彷向") ;
}
function two (event) {
alert("我之后，淘宝不再坊向") ;
//方式1:
//return false;
//方式2：
var event = event || window. event ;
event.preventDefault () ;
}
</ script>阻止事件的传播
<!-- 区域1 -->
<div id="e1" style-"width:200px ; height: 200px; background-color: #f00;">
<div id="e2" style= "width: 100px ; height: 100px; background-color: #0f0;"></div>
</div>
<hr />
<!-- 区域2 -->
<div id="e3" style="width:200px ; height: 200px; background-color: #f00;">
<div id="e4" style="width: 100px ; height: 100px; background-color: #0f0;"></div>
</div>
<script type-"text/javascript">
var el = document.getElementById("e1");
var e2 = document.getElementById("e2");
var e3 = document.getElementById("e3");
var e4 = document.getElementById("e4") ;
//设置“区域1”事件
el,onclick.function() {
alert("e1") ;
}
e2,onclick.function() {
alert("e2, 同时el也触发");
}
//设置“区域2”事件
e3.onclick = function() {
alert ("e3");
}
e4.onclick = function (event) {
alert("e4, e3不触发");
var event = event || window.event;
event.stopPropagation();
}
</script>“JavaScript怎么实现定时弹广告”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
