@-webkit-keyframes stripe-slide { 0% { background-position:0% 0; } 100% { background-position:100% 0; } }@keyframes stripe-slide { 0% { background-position:0% 0; } 100% { background-position:100% 0; } }.btn { overflow:visible; margin:0; padding:0; border:0; background:transparent; font:inherit; line-height:normal; cursor:pointer; -moz-user-select:text; text-decoration:none; text-transform:uppercase; padding:8px 20px 13px; background-color:#fff; color:#666; border:2px solid #666; border-radius:6px; margin-bottom:6px; transition:all 0.5s ease; } .btn::-moz-focus-inner { padding:0; border:0; } .btn--stripe { overflow:hidden; position:relative; } .btn--stripe:after { content:""; display:block; height:7px; width:100%; background-image:repeating-linear-gradient(45deg,#000,#000 1px,transparent 2px,transparent 5px); -webkit-backface-visibility:hidden; backface-visibility:hidden; border-top:1px solid #666; position:absolute; left:0; bottom:0; background-size:7px 7px; } .btn--stripe:hover,.btn--stripe:focus { background-color:#189F92; color:#fff; border-color:#189F92; outline:0 none; } .btn--stripe:hover:after,.btn--stripe:focus:after { background-image:repeating-linear-gradient(45deg,#fff,#fff 1px,transparent 2px,transparent 5px); border-top:1px solid #fff; -webkit-animation:stripe-slide 12s infinite linear forwards; animation:stripe-slide 12s infinite linear forwards; } .btn--large { width:50%; } .btn--radius { border-radius:36px; } .start { border:1px solid #ddd; padding:0.5rem 1rem; border-radius:5px; }
要做一个功能需要将按钮状态的存储其中涉及到按钮的定时,在网上找了段代码修改了下文字输出的逻辑 gettimerstring 函数按钮样式
可以根据自己需求随意更改
html显示倒计时的元素为id为 timer+数字按钮绑定点击的class为 inter 根据class为 inter+数字 来填充 id timer+数字 (例如 .inter1 点击=> #timer1 输出倒计时时间)data-time 需要倒计时的时间~~~~~~~css按钮的基本样式为 btn btn--stripebtn--radius 按钮圆角 btn--large 按钮变大