JavaScript 定时器简单轮播

最新推荐文章于 2023-05-18 20:23:20 发布

飞向三十岁

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量236

点赞数

分类专栏： JavaScript 文章标签： JavaScript 定时器简单轮播

本文链接：https://blog.csdn.net/weixin_43999652/article/details/100514201

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript

标签（空格分隔）： JavaScript day02 定时器简单轮播

Window对象的常用方法

◼三种弹框方式
◼open()
打开一个新的浏览器窗口加载指定的文档

newWIn = window.open("弹出窗口的url", "窗口名称", "窗口特征")
var newWin = window.open( "adv.html", "广告", 
" height=380, width=320, toolbar=0, scrollbars=0, location=0, status=0,menubar=0, resizable=0 " );

◼close()
关闭浏览器窗口

//新开一个窗口 
myWindow=window.open('','','width=200,height=100') 
myWindow.document.write("This is 'myWindow'");
//关闭窗口 
myWindow.close();

注意

1、某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身 。
2、只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。
3、open和close由于很多浏览器并不兼容多以很少会有使用。

◼setTimeout()

用于在指定的毫秒数后调用函数或计算表达式，只执 示例 行一次。
clearTimeout( timer ) 方法 可取消由 setTimeout() 方法设置的 timeout

◼setInterval(）

可按照指定的周期（以毫秒计）来调用函数或计算表 
clearInterval( timer ) 方法可取消由 setInterval() 方法设置的 timeout

定时器可以完成很多的动画需求

◼书写定时器的不同方法

function fn( ) { document.title = n++; }
//方法1： 
var timer = window.setInterval( "fn()" , 1000); 
//方法2： 
var timer = window.setInterval( fn , 1000 ); 
//方法3：
var timer = window.setInterval( function(){ fn() }, 1000)

JavaScript常用内置对象

String	用于支持对字符串的处理
Date	用于操作日期和时间
Array	用于在单独的变量名中存储一系列的值
Math	用于执行常用的数学任务，它包含了若干个数字常量和函数

这些对象的方法会java类似

实例完成计时功能时功能

在这里插入图片描述
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>0</h1>
    <input type="button" value="开始" onclick="javascrtipt:start();">
    <input type="button" value="暂停" onclick="javascrtipt:pause();">
    <input type="button" value="停止" onclick="javascrtipt:stop();">
    <script type="text/javascript">
        var inputs = document.getElementsByTagName("input");
        var hs = document.getElementsByTagName("h1")[0];
        var timer = null;
        function start(){
            if(timer==null){
                timer=setInterval(
                    function(){
                    hs.innerHTML++;
                }
                ,1000);
            }
        }
        function pause(){
            if(timer!=null){
                clearInterval(timer);
                timer=null;
            }
        }
        function stop(){
            clearInterval(timer);
            timer=null;
            hs.innerHTML = 0;
        }
    </script>
</body>
</html>

表单提交实例

label标签提示错误
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="#" method="GET" onsubmit="return check();">
        账号<input type="text" /><br>
        密码<input type="password" /><br>
        <input type="submit" onclick=""/><br>
        <label id="la" style="display: none"></label>
    </form>
    <script type="text/javascript">
        var inputs = document.getElementsByTagName("input");
        var la = document.getElementById("la");
        function check(){
            if(inputs[0].value==null || inputs[0].value.length<=0){
                la.innerHTML="用户名不能为空";
                la.style.display="block";
                return false;
            }
            if(inputs[1].value==null || inputs[1].value.length<=0){
                la.innerHTML="密码不能为空";
                la.style.display="block";
                return false;
            }
            return true;
        }

    </script>
</body>
</html>

轮播

注意
u.style.marginLeft = ‘0px’;初始化赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            width: 192px;
            height: 108px;
        }
        ul{
            width: 768px;
            margin: 0;
            padding: 0;
            position: absolute;
        }
        li{
            float: left;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        div{
            width: 192px;
            height: 108px;
            border: 1px solid black;
            margin: 0 auto; 
            overflow: hidden;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript">
        var u = document.getElementsByTagName("ul")[0];
        u.style.marginLeft = '0px';
        setInterval(
            function(){
                var i = parseInt(u.style.marginLeft);
                i=i-2;
                if(i<-192*3)
                    i=0;
                u.style.marginLeft=i+"px";
            }
        ,10);
    </script>
</body>
</html>