您正在使用 IPV4 [3.239.95.36] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 儿童节 007
2024年 端午节 016
2025年 元 旦 221
2025年 春 节 249
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS实现简单计数器
内容摘要: HTML代码divclass='body'divclass='text'fontCounter/font/divdivclass='count'spanid='demo'class='ft'2/span/divdivclass='btn'buttontype='button'οnclick='add()'class='btn1'+/buttonbuttont......
HTML代码

<divclass="body">

<divclass="text">

<font>Counter</font>

</div>

<divclass="count">

<spanid="demo"class="ft">

2

</span>

</div>

<divclass="btn">

<buttontype="button"οnclick="add()"class="btn1">+</button>

<buttontype="button"οnclick="zero()"class="btn2">零</button>

<buttontype="button"οnclick="sub()"class="btn1">-</button>

</div>

</div>

CSS代码

.body{

width:300px;

height:500px;

background-color:#211d5a;

border-radius:20px;

display:flex;

flex-direction:column;

align-items:center;

}

.text{

font-size:24px;

color:white;

margin-top:60px;

text-shadow:2px2px2px#fff;

}

.count{

position:relative;

width:200px;

height:200px;

margin-top:60px;

border:10pxsolid;

border-color:rgb(79,59,156);

border-radius:50%;

display:flex;

}

.ft{

font-size:100px;

color:#fff;

/*left:50%;

margin-left:-102px;

margin-top:40px;*/

margin:auto;

}

.btn{

width:220px;

display:flex;

/*flex-direction:row;*/

justify-content:space-between;

margin-top:60px;

}

.btn1{

width:50px;

height:30px;

border:0px;

border-radius:4px;

background-color:rgb(79,59,156);

font-size:20px;

color:#efdaff;

}

.btn2{

width:50px;

height:30px;

border:0px;

border-radius:4px;

background-color:rgb(79,59,156);

font-size:22px;

color:#efdaff;

}

tips:弹性盒子display:flex布局+margin:auto可实现完美居中。

JS代码

<script>

varcounter=document.getElementById("demo").innerHTML;

functionadd(){

counter++;

document.getElementById("demo").innerHTML=counter;

}

functionsub(){

if(counter==0){

counter=0;

}else{

counter--;

document.getElementById("demo").innerHTML=counter;

}

}

functionzero(){

counter=0;

document.getElementById("demo").innerHTML=counter;

}

</script>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:使用JS显示倒计时数字时钟效果

 

下一篇:css 边框添加四个角的实现代码

发布日期:2021/10/13
手机扫二维码直达本页
发布时间:14:17:06
点  击:20
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....