<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>轮播图</title>

 </head>

 <body>

 <img id="lunbo" src="img/banner_1.jpg" alt="">

 <img id="lunbo2" src="img/banner_1.jpg" alt="">

 <img id="lunbo3" src="img/banner_1.jpg" alt="">

 <script>

     /*

         1.使用img标签显示图片

         2.定义一个方法，修改图片的src属性

         2.使用循环定时器，周期调用方法

      */

     // var number = 0;

     // var imgs = ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"];

     // function changImg(id, imgs){

     //     number++;

     //     if(number == imgs.length){

     //         number = 0;

     //     }

     //     id.src = imgs[number];

     // }

     // var lunbo = document.getElementById("lunbo");

     // setInterval(function(){

     //     changImg(lunbo, imgs);

     // }, 1000);

     /*

         提供更通用的代码，实现轮播图效果

         需要的参数，imgs, 轮播图片对象，轮播的周期，构造出一个轮播图对象

      */

     function LunBo(imgEle, imgs, time){

         //关键点:LunBo函数中的this和其内部的匿名函数中的this名称冲突，需要重命名个变量。

         var obj = this;

         //保存参数，1.编号 2.图片数组 3.img元素 4.轮播周期

         this.number = 0;

         this.imgs = imgs;

         this.imgEle = imgEle;

         this.time = time;

         this.changeImg = function(){

             obj.number++;

             if(obj.number == obj.imgs.length){

                 obj.number = 0;

             }

             obj.imgEle.src = obj.imgs[obj.number];

         };

         this.timer = setInterval(function(){

             obj.changeImg();

         }, obj.time);

         this.stop = function(){

             clearInterval(obj.timer);

         };

     }

     var lunBo = new LunBo(document.getElementById("lunbo"),

         ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"],

         3000);

     var lunBo2 = new LunBo(document.getElementById("lunbo2"),

         ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"],

         8000);

     var lunBo3 = new LunBo(document.getElementById("lunbo3"),

         ["img/banner_1.jpg", "img/banner_2.jpg"],

         100);

 </script>

 </body>

 </html>

轮播图 定时器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>自动跳转首页</title>

 </head>

 <body>

     <span id="second-num">5</span>秒后自动跳转首页

     <script>

         /*

             分析：

                 1.倒计时读秒效果

                 2.定义一个方法，获取span标签，修改其内容，并减1

          */

         var second = 5;

         var timeEle = document.getElementById("second-num");

         function showTime(){

             second--;

             if(second <= 0){

                 location.href = "https://www.baidu.com";

                 return;//必须加，不然的话当加载时，会继续读秒。

             }

             timeEle.innerHTML = second;

         }

         setInterval(showTime, 1000);

     </script>

 </body>

 </html>

自动跳转 定时器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>工具提示</title>

     <style>

         div{

             width: 100px;

             height: 100px;

             margin: 100px;

             background-color: brown;

         }

         #switch{

             border: 10px solid black;

             position: relative;

             box-sizing: border-box;

         }

         #tip{

             left: 200px;

             top: 0px;

             position: absolute;

             background-color: purple;

             margin: 0px;

         }

     </style>

 </head>

 <body>

     <div id="switch">

         开关

         <div id="tip" >

             提示

         </div>

     </div>

     <script>

         /*

             不带延迟的工具提示

          */

         // var switchElem = document.getElementById("switch");

         // switchElem.onmouseenter = function(){

         //     var tip = document.getElementById("tip");

         //     tip.hidden = false;

         // }

         //

         // switchElem.onmouseleave = function(){

         //     var tip = document.getElementById("tip");

         //     tip.hidden = true;

         // }

     </script>

     <script>

         /*

             带延迟的工具提示

          */

         var switchElem = document.getElementById("switch");

         //保存定时器

         var switchTimer;

         switchElem.onmouseenter = function(){

             var tip = document.getElementById("tip");

             if(switchTimer){

                 clearTimeout(switchTimer)

             }

             tip.hidden = false;

         }

         switchElem.onmouseleave = function(){

             var tip = document.getElementById("tip");

             switchTimer = setTimeout(function(){

                 tip.hidden = true;

             }, 300);

         }

     </script>

 </body>

 </html>

工具提示 定时器

黑马JavaScript学习一 BOM之Window对象定时器功能的更多相关文章

  1. JavaScript 学习（1）--window对象

    JavaScript 学习--Window对象 window对象方法 1.1 创建新窗体 //窗体打开 var newWindow=Window.open("default.html&quo ...

  2. [转] JavaScript学习：BOM和DOM的区别和关联

    BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系 ...

  3. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  4. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  5. javascript学习之BOM

    BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...

  6. javascript知识点之DOM与window对象

    在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本 ...

  7. BOM之window对象

    双重角色 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Glob ...

  8. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  9. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

随机推荐

  1. Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结

    搭建项目架构 目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成) 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装 ...

  2. javascript——对象的概念——内建对象

    包括内建对象的所有对象都是Object对象的子对象. 1.Array():构建数组的内建构造器函数 例:创建数组方式有两种: 2.Boolean:是对象,与基本数据类型 布尔值 不相同 例:创建Boo ...

  3. 问题：oracle case when；结果：Oracle CASE WHEN 用法介绍

    Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ...

  4. 一个hitbernate配置文件，带几个表(注意mapping)；如果连接字符串没有设置utf-8，向insert mysql 会产生乱码(utf8 或 utf-8)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-configuratio ...

  5. ActionbarActivity和普通的Activity的区别

    ActionbarActivity用于支持API11以下的程序支持ActionBar的功能,但是需要加入支持库 不这样做的话只有API11以上的才能支持ActionBar

  6. ROS Learning-015 learning_tf（编程） 编写一个监听器程序 (Python版)

    ROS Indigo learning_tf-02 编写一个 监听器 程序 (Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 1 ...

  7. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-006Mixing inheritance strategies(@SecondaryTable、@PrimaryKeyJoinColumn、<join fetch="select">)

    一.结构 For example, you can map a class hierarchy to a single table, but, for a particular subclass, s ...

  8. GTK编程

    一.简介 GTK(GIMP Toolkit)是一套跨多种平台的图形工具包,按LGPL许可协议发布的.虽然最初是为GIMP写的,但早已发展为一个功能强大.设计灵活的通用图形库.特别是被GNOME选中使得 ...

  9. 21、conda下载，安装，卸载

    参考:https://www.cnblogs.com/Datapotumas/p/6293309.html 1.下载 conda下载网址:https://conda.io/miniconda.html ...

  10. 使用java以及jdbc不使用第三方库执行sql文件脚本

    使用java以及jdbc不使用第三方库执行sql文件脚本 2017年02月15日 15:51:45 阅读数:660 使用java执行sql脚本的方法 解析sql脚本,删除不必要的注释和空行 将语句按分 ...