JQuery闪动错误提示

最新推荐文章于 2024-09-21 11:28:04 发布

Devying

最新推荐文章于 2024-09-21 11:28:04 发布

阅读量706

点赞数

分类专栏： JQuery JS 文章标签： jquery JQuery闪动

本文链接：https://blog.youkuaiyun.com/ying1989920/article/details/45442399

版权

JQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

3 篇文章

订阅专栏

用JQuery做一些能够闪动的提示，用户体验非常好，那么如何去实现呢
首先想到的当然是让效果以一定的间隔出现，然后消失，如此反复，因此需要用到定时器的知识那么来看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>test</title>
    <style type="text/css">
    *{margin:0px 0px;padding: 0px 0px;}

    input{

        width: 400px;
        padding: 10px;
        font-size: 15px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .error{
        border: 1px solid #f00;
        box-shadow: 0px 0px 5px #F00;
    }
    </style>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $("#button").click(function(){
            var i=0;
            var t=setInterval(function(){
                if(i%2){
                   $("input").addClass('error');
                }else{
                    $("input").removeClass('error');
                }

                if(i>9){
                    clearInterval(t);
                    $("input").addClass('error');
                }
                i++;
            },200);

        })
    })
    </script>


</head>
<body>
    用户名<input type="text" name="name">
    <button id="button">提交</button>

</body>
</html>