自定义属性按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>自定义按钮</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        input{width: 50px;height: 50px;margin:20px;}
    </style>
    <script type="text/javascript">
         window.onload=function(){
            var oBtn = document.getElementsByTagName("input");
            var attr = ["哼哼","呵呵","嘿嘿","嘻嘻","嘎嘎","啧啧"];
            for(var i=0;i<attr.length;i++){
                oBtn[i].num=0;
                oBtn[i].onclick=function(){
                    this.value=attr[this.num];
                    this.num++;
                    if(this.num===attr.length){
                        this.num=0;
                    };
                };
            };
         };
    </script>   
</head>
<body>
    <input type="button" value="哈哈"></input>
    <input type="button" value="哈哈"></input>
    <input type="button" value="哈哈"></input>
</body>
</html>

posted on 2017-04-24 15:55  37℃的冰  阅读(109)  评论(0)    收藏  举报

导航