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:向页面的某个元素中写一段内容,将原有的东西覆盖

document.write():向页面中写内容

2.5 js中函数的编写方式:

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


        
            //方式1:声明函数
            function demo01(){
                alert("案例1");
            }
            //方式1:调用函数
            demo01();
            
            //方式2:声明匿名函数
            var demo02 = function(){
                alert("案例2");
            };
            //方式2:调用函数
            demo02();
        
        

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代码,页面加载触发指定函数


  //加载成功启动监听器,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"
   }

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

实例:

小灰灰
            //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";

JavaScript怎么实现定时弹广告

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 (查询部分)。


  function change () f
    location.href = "http: / /www. ithe ima. com" ;
  )


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").innerHTML
设置:document.getElementById("divId").innerHTML = "...."

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.innerHTML = text;
        showObj.style.display = "block" ;
}
/**
 * 2.2 显示错误提示信息 
 */
function hideTip() (
        var showObj = document . getEl ementById (errObjId) ;
        showObj.innerHTML = "";
        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属性:

clientX:返回当事件被触发时,鼠标指针的水平坐标。

clientY:返回当事件被触发时,鼠标指针的垂直坐标。

keyCode:返回当事件被触发时,键盘输入ASCII码。

event方法:

preventDefault():阻止浏览器默认行为

stopPropagation():阻止事件的传播

阻止浏览器默认行为

百度
淘宝
        function one () {                 alert("我之后,百度官网継銕彷向") ;             }         function two (event) {                 alert("我之后,淘宝不再坊向") ;                  //方式1:                 //return false;                 //方式2:                 var event = event || window. event ;                 event.preventDefault () ;             }

阻止事件的传播




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

“JavaScript怎么实现定时弹广告”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


新闻名称:JavaScript怎么实现定时弹广告
网页地址:http://hbruida.cn/article/pecdhe.html