导航：首页 > 开发技术 >

JavaScript怎么实现定时弹广告

发表于：2024-10-27 作者：千家信息网编辑

千家信息网最后更新 2024年10月27日，本篇内容介绍了"JavaScript怎么实现定时弹广告"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

千家信息网最后更新 2024年10月27日JavaScript怎么实现定时弹广告

本篇内容介绍了"JavaScript怎么实现定时弹广告"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1. JavaScript的概述

1.1 什么是JavaScript

JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

JavaScript被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript由数行可执行计算机代码组成。
JavaScript通常被直接嵌入HTML页面。
JavaScript是一种解释性语言(就是说，代码执行不进行预编译)。

JavaScript的组成：

核心（ECMAScript）

文档对象模型（DOM）

浏览器对象模型（BOM）

ECMAScript：语法，语句.

BOM：浏览器对象.

DOM：Document Object Model.操作文档中的元素和内容.

1.2 JavaScript的作用

使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件作出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

1.3 JavaScript的引入

在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是连接外部JavaScript脚本文件，称为外链式。对他们的具体讲解如下：

(1)内嵌式，在HTML文档中，通过

(2)外联式，在HTML文档中，通过

2. 基本语法

2.1 变量

(1)在使用JavaScript时，需要遵循以下命名规范：

必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function
JavaScript严格区分大小写。　

(2)变量的声明

var 变量名;    /JavaScript变量可以不声明，直接使用，默认值：undefined

(3)变量的赋值

var 变量名 = 值;    //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据

2.2 数据类型

【基本类型】

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提供众多预定义引用类型（内置对象）。

2.3 运算符

JavaScript运算符与java运算符基本一致。可以看我的java基础随笔

2.4 基本操作

alert()：向页面中弹出一个提示框！！

innerHTML：向页面的某个元素中写一段内容，将原有的东西覆盖

[xss_clean]()：向页面中写内容

2.5 js中函数的编写方式：

函数：实现一定功能的代码块，类似与java中的方法。关键字function，函数名自定义。

3. 案例：轮播图

3.1 定时器setInterval

window.setInterval(code,millisec) 按照指定的周期(间隔)来执行函数或代码片段。    　　参数1：code必须。执行的函数名或执行的代码字符串。　　参数2：millisec必须。时间间隔，单位：毫秒。    返回值：一个可以传递给window.clearinIerval()从而取消对code的周期性执行的值。    例如：        方式1：函数名，      setInterval(show , 100);        方式2：函数字符串， setInterval(""show() , 100);

window对象提供都是全局函数，调用函数时window可以省略。

window.setInterval()等效setInterval()

3.2 案例实现

步骤1：为轮播图img标签添加id属性

步骤2：编写js代码，页面加载触发指定函数

4. 案例：定时弹广告

4.1 定时器：setTimeout

setTimeout()在指定的毫秒数后调用函数或执行代码片段。

setTimeout(code,millisec)       code 必需。要调用的函数或要执行的代码字符串。       millisec 必需。在执行代码前需等待的毫秒数。

setInterval() 以指定周期执行函数或代码片段。

clearInterval() 取消由setInterval()设置的timeout。

clearTimeout() 取消由setTimeout()方法设置的timeout。

4.2 JavaScript样式获得或修改

获得或设置样式

obj.style.属性     获得指定"属性"的值。obj.style.属性=值    给指定的"属性"设置内容。如果属性由多个单词使用"-"连接，需要将"-"删除，并将后一个单词首字母大写。例如：background-color 需要改成 backgroundColor

实例：

小灰灰

4.3 案例实现

步骤1：在页面中，添加广告位div，并设置页面加载事件

步骤2：编程JS实现

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);}

5. BOM（Browse Object Mode）

5.1 Browse 对象

DOM Window

DOM Navigator

DOM Screen

DOM History

DOM Location

5.2 BOM:Window对象

方法：定时器

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;

5.3 BOM：Location对象

href属性：设置或返回完整的URL。

hash：设置或返回从井号(#) 开始的URL (锚)。
host：设置或返回主机名和当前URL 的端口号。
hostname：设置或返回当前URL 的主机名。
href：设置或返回完整的URL。
pathname：设置或返回当前URL的路径部分。
port：设置或返回当前URL 的端口号。
protocol：设置或返回当前URL的协议。
search：设置或返回从问号(?) 开始的URL (查询部分)。

5.4 BOM：History对象

go()方法：跳转到指定页面

go(-1)：加载前一个链接，等效back()
go(1)：加载后一个链接，等效forward()

back():加载history 列表中的前一个URL。
forward():加载history 列表中的下一个URL。
go():加载history 列表中的某个具体页面。

6. JS操作HTML、事件

6.1 标签体内容：innerHTML

innerHTML-HTML元素的内部文本

获得：document.getElementById("divId")[xss_clean]设置：document.getElementById("divId")[xss_clean] = "...."

6.2 获得指定的id的值

提供函数val(objId)获得指定id属性对应元素value的值

/** * 获得二指定元素value属性的值 * 例如：var loginName = val("loginnameId"); */function val (objId) f    return document.getElementById(objId).value;)

6.3 错误提示

当标签没有验证通过时，给出提示信息。如果校验通过隐藏错误提示信息

/** * 2.1 显示错误提示信息  * 例如：showTip("loginnameIdMsg","用户名不能为空"); */function showTip(errObjId, text ) {        //获得错误提示对象，并设置和显示        var showObj = document.getElementById(errObjId) ;        showObj[xss_clean] = text;        showObj.style.display = "block" ;}/** * 2.2 显示错误提示信息  */function hideTip() (        var showObj = document . getEl ementById (errObjId) ;        showObj[xss_clean] = "";        showObj.style.display = "none";}

6.4 获得焦点

/** * 3 获得焦点 */function focus (objId) {        //指定标签获得焦点        document。getElementById(objId).focus();}

6.5 事件总结

常见事件：

onload：某个页面或图像被完成加载
onsubmit：提交按钮被点击
onclick：鼠标点击某个对象
ondblclick：鼠标双击某个对象
onblur：元素失去焦点
onfocus：元素获得焦点
onchange：用户改变域的内容
onkeydown：某个键盘的键被按下
onkeypress：某个键盘的键被按下或按住
onkeyup：某个键盘的键被松开
onmousedown：某个鼠标按键被按下
onmouseup：某个鼠标按键被松开
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开
onmousemove：鼠标被移动

event属性：