码迷,mamicode.com
首页 > 其他好文 > 详细

按钮特效-不同的状态展示不同样式的按钮

时间:2016-09-22 12:57:34      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

————————————————————————

<script type="text/javascript">            
            var currStatus = ‘正常‘;            //当前的状态
            var myTimer = null;                //定时器
            var mySec = 0;                    //定时还剩下的秒
            //修改按钮为正常状态
            function normalStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById(‘myBtn‘);
                myBtn.disabled = false;        //恢复可用状态
                window.clearInterval(myTimer);//取消定时器
                currStatus = ‘正常‘;            //设置正常状态显示值
                showStatus();                //显示当前状态
            }
            //修改按钮为不可用状态
            function disableStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById(‘myBtn‘);
                myBtn.disabled = true;        //设置不可用为true
                window.clearInterval(myTimer);//取消定时器
                currStatus = ‘不可用‘;        //设置不可用状态显示值
                showStatus();                //显示当前状态
            }
            //修改按钮为开始定时10秒以后可用的状态
            function timerStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById(‘myBtn‘);
                myBtn.disabled = true;        //设置不可用为true
                window.clearInterval(myTimer);//取消定时器
                mySec = 10;                //开始10秒倒计时
                myTimer = window.setInterval(function(){
                    if(mySec == 0){            //如果倒计时完了,则恢复按钮状态
                        normalStatus();        //恢复到正常状态
                    }else{
                        mySec--;            //让倒计时秒数自减
                        //设置倒计时状态显示值
                        currStatus = ‘倒计时中(‘+mySec+‘)‘;
                        showStatus();        //显示当前状态
                    }
                }, 1000);
            }
            //显示当前状态
            function showStatus(){
                //获取到标题的DOM
                var h2 = document.getElementsByTagName("h2")[0];
                //设置标题为当前的状态
                h2.innerHTML = ‘当前的状态:‘ + currStatus;
            }
        </script>

——————————————————————————

<body style="text-align:center;">
        <!-- 定义按钮 -->
        <h2>当前的状态:</h2>
        <input type="button" value="正常状态" id="myBtn1" onclick="normalStatus()"/>
        <input type="button" value="不可用状态" id="myBtn2" onclick="disableStatus()"/>
        <input type="button" value="开始倒计时状态" id="myBtn3" onclick="timerStatus()"/>
        <br /><br />
        <input type="button" value="一个按钮" id="myBtn"/>
    </body>

——————————————————————————

 

按钮特效-不同的状态展示不同样式的按钮

标签:

原文地址:http://www.cnblogs.com/hanxuming/p/5895762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!