利用js定时器设定时间执行动作,实现网页图片动

2019-08-17 作者:网站首页   |   浏览(83)

学学jQuery,实现个小功能练练手

进入正题,先说说定时器。
在javascritp中,有两个关于定时器的专用函数,分别为:
1.倒计定时器:timename=setTimeout("function();",delaytime);
2.循环定时器:timename=setInterval("function();",delaytime);
第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。
  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
则需要用到循环定时器“setInterval("function();",delaytime)” 。

需要用到定时器

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

html代码如下

一下略举两例。
例1.表单触发或加载时,逐字输出字符串

  

复制代码 代码如下:

<html>
<head>
    <title></title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<h2>ShowOrHide</h2>

<META http-equiv="content-type" content="text/html;charset=utf8">
    <input type="button" name="stop" value="咒立停"/>
    <input type="button" name="begin" value="颤抖吧"/>
<div id="song" style="text-align: center; font-size: 100px;width:300px;">
    <img id="gala" alt="我爱罗" src="gala.jpg" style="width:300px;height:300px"/>
</div>
<script type="text/javascript">
    $(function () {
        $("h2").click(function () {
            //隐藏或显示标签
            $("img#gala").slideToggle();
        });
        $("img#gala").mouseenter(function(){
            window.clearInterval(timerlr);
        }).mouseleave(function(){
            window.clearInterval(timerlr);//非第一次使用定时器必须先停止,否则会导致时间混乱
            timerlr=self.setInterval("move()", global.timespan);
        });
        $("[name='stop']").click(function(){
            window.clearInterval(timerlr);
        });
         $("[name='begin']").click(function(){
            window.clearInterval(timerlr);//非第一次使用定时器必须先停止,否则会导致时间混乱
            timerlr=self.setInterval("move()", global.timespan);
        });
    });

    //声明全局变量对象,尽量减少污染
    var global = {
        timespan: 10,//定时器间隔
        vdirect: "down",//垂直滚动方向
        hdirect: "right",//水平滚动方向
        widthspan: 10,//单次宽度变化
        heightspan: 10//单次高度变化
    }

    var timerlr = self.setInterval("move()", global.timespan);

    function moveright() {
        $song = $("div#song");
        var offset = $song.offset();
        var left = offset.left   global.widthspan;
        $song.offset({ left: left, top: offset.top });
    }
    function movedown() {
        $song = $("div#song");
        var offset = $song.offset();
        var top = offset.top   global.heightspan;
        $song.offset({ left: offset.left, top: top });
    }
    function moveleft() {
        $song = $("div#song");
        var offset = $song.offset();
        var left = offset.left - global.widthspan;
        $song.offset({ left: left, top: offset.top });
    }
    function moveup() {
        $song = $("div#song");
        var offset = $song.offset();
        var top = offset.top - global.heightspan;
        $song.offset({ left: offset.left, top: top });
    }

    //进行水平和垂直方向的移动
    function move() {
        $height=$(window).height();
        $song = $("div#song");

        //离底部还有10像素的距离时开始回弹
        if ($song.offset().top   $song.height() >= $height-10) {
            global.vdirect = "up";
        }
        else if ($song.offset().top <= 10) {
            global.vdirect = "down";
        }
        if (global.vdirect == "down") {
            movedown();
        }
        else if (global.vdirect == "up") {
            moveup();
        } 
        if ($song.offset().left   $song.width() >= $(window).width()-10) {
            global.hdirect = "left";
        }
        //离右边界还有10像素距离还是回弹
        else if ($song.offset().left <= 10) {
            global.hdirect = "right";
        }
        if (global.hdirect == "right") {
            moveright();
        }
        else if (global.hdirect == "left") {
            moveleft();
        }
    }
</script>
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq 1);
document.getElementById('word').innerHTML = msg;
seq ;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="word"></div><br/><br/>
</body>
</html>

 

例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。

代码地址: 

复制代码 代码如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c ;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> " c " </b>次<br/>";
if(document.getElementById('b').value!=""){
str ="输入框当前内容为当前内容为<br/><b> " document.getElementById('b').value "</b>";
}
document.getElementById('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
</body>
</html>

 

例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。

哥们用的图片,话说火影写的越来越没意思了

复制代码 代码如下:

图片 1

<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementById('m').innerHTML="计时已经开始!";
setTimeout("alert('十秒钟到!')",10000)
}
</script>
<body>
<div id="m"></div>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>

需要用到定时器 html代码如下 htmlhead title/titlescript type="text/javascript" src="jquery-1.9.1.min.js"/script/headbodyh2ShowO...

您可能感兴趣的文章:

  • js定时器(执行一次、重复执行)
  • js定时器的使用(实例讲解)
  • JavaScript定时器详解及实例
  • Javascript/Jquery——简单定时器的多种实现方法
  • JavaScript暂停和继续定时器的实现方法
  • node.js中的定时器nextTick()和setImmediate()区别分析
  • javascript中SetInterval与setTimeout的定时器用法
  • js定时器怎么写?就是在特定时间执行某段程序
  • Javascript 定时器调用传递参数的方法
  • JavaScript定时器setTimeout()和setInterval()详解

本文由yzc216亚洲城发布于网站首页,转载请注明出处:利用js定时器设定时间执行动作,实现网页图片动

关键词: yzc216亚洲城