按键手机js模拟

最新推荐文章于 2021-06-03 01:53:40 发布

善待366

最新推荐文章于 2021-06-03 01:53:40 发布

阅读量300

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_56072688/article/details/115389357

版权

本文介绍了如何使用JavaScript（JS）来模拟老式的按键手机，包括实现基本的按键操作和显示功能，重现经典手机的使用体验。

摘要由CSDN通过智能技术生成

模拟按键手机

<style>
.v138{
   box-sizing:border-box;border:1px solid red;width:220;height:425}
.v138 .top{
   position:relative;box-sizing:border-box;border:1px solid red;width:100%;height:60%}
.v138 .bottom{
   box-sizing:border-box;border:1px solid red;width:100%;height:40%}
.v138 .screen{
   position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;border:1px solid red;width:80%;height:80%}
.dirctl{
   box-sizing:border-box;border:1px solid red;width:100%;height:40%}
.nums{
   box-sizing:border-box;border:1px solid red;width:100%;height:60%}
.num{
   box-sizing:border-box;border:1px solid red;float:left;width:25%;height:18%}
.cpart{
   box-sizing:border-box;border:1px solid red;float:left;height:100%;width:33.3%}
</style>
<div class='v138'>
<div class='top'><div class='screen'>
<div class='home'><span >菜单</span><span >联系人</span></div>
<div class='menu' style="display:None"><span >计算器</span><span >时钟</span><span >拨号</span></div>
<div class='calculater' style="display:None"><div class='outshow'>输出</div><span>+</span><span >-</span><span >=</span></div>
</div></div>
<div class='bottom'>
<div class='dirctl'><div class='cpart'><button onclick='keyclick("f1")'>F1</button></div><div class='cpart'><button onclick='keyclick("up")'>上</button><button onclick='keyclick("down")'>下</button><button onclick='keyclick("left")'>左</button><button onclick='keyclick("right")'>右</button><button onclick='keyclick("ok")'>OK</button></div><div class='cpart'><button onclick='keyclick("f2")'>F2</button></div></div>
<div id='numsdis'></div>
</div></div>
<script>
var numskey='123*4560789#';for(let a in numskey){
   let emt=document.createElement('div');emt.className="num";emt.innerHTML=numskey[a];emt.onclick=function(){
   keyclick(numskey[a])};numsdis.append(emt)}
var prvapp=null
function keyclick(n){
    if(prvapp!=null){
   prvapp.keyclick(n)} }
function intentto(a,b){
   a.dis.style.display="None";b.dis.style.display="";prvapp=b}
myhome=new home();function home