javascript 實現一個簡單的數字鍵盤

weixin_33890499發表於2017-12-06
原文網址 : https://blog.csdn.net/weixin_33890499/article/details/87104252
JavaScript

原理很簡單，自己看程式碼！

<!DOCTYPE html>
<html>
<head>
    <title>只能家居安全鎖</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
    body{
        margin:10px; 
    }
    .show_data{
        overflow: hidden;
    }
    .show_item{
        display: block;
        float: left;
        width: 40px;
        height: 28px;
        border-bottom: 1px solid #ccc;
        margin-right: 15px;
        text-align: center;
        line-height: 28px;
    }

    .keyboard{
        margin-top: 10px;
    }

    .data-btn{
        display: inline-block;
        width: 30px;
        height: 30px;
        border:1px solid #ccc;
        background: #f1f1f1;
        margin-bottom: 5px;
        margin-right: 5px;
        line-height: 30px;
        text-align: center; 
        border-radius: 4px;
        box-shadow: 1px 1px 3px #ddd;
    }

    .delete_btn{
        display: inline-block;
        width: 100px;
    }
    .ok_btn{
        width: 100px;
    }

</style>
<div class="dcontent">
    <!-- 顯示 -->
    <div class="show_data">
        <span class="show_item" id="show_1"> </span>
        <span class="show_item" id="show_2"> </span>
        <span class="show_item" id="show_3"> </span>
        <span class="show_item" id="show_4"> </span>
        <span class="show_item" id="show_5"> </span>
        <span class="show_item" id="show_6"> </span>
    </div>


    <!-- 假鍵盤 -->
    <div class="keyboard">
        <span class="data-btn add_data" data=0>0</span>
        <span class="data-btn add_data" data=1>1</span>
        <span class="data-btn add_data" data=2>2</span>
        <span class="data-btn add_data" data=3>3</span>
        <span class="data-btn add_data" data=4>4</span>
        <span class="data-btn add_data" data=5>5</span>
        <span class="data-btn add_data" data=6>6</span>
        <span class="data-btn add_data" data=7>7</span>
        <span class="data-btn add_data" data=8>8</span>
        <span class="data-btn add_data" data=9>9</span>
    </div>
    <span class="data-btn delete_btn" id="delete_data">刪除</span>
    <span class="data-btn ok_btn" id="ok_data">完成</span>
</div>
<script type="text/javascript">
    // 輸入的資料
    var data_list=Array();
    show_data();

    // 顯示資料函式
    function show_data() {
        // 將原有html清空 然後重新顯示
        $('.show_item').html("");
        for (var i = 0; i < data_list.length; i++) {
            var ind=i+1;
            $("#show_"+ind).html(data_list[i]);
        }
        console.log(data_list);
    }

    // 輸入數字
    function add_data(data) {
        //追加完數字後重新顯示
        if (data_list.length<=5) {
            data_list.push(data);
            show_data();
        }
    }

    //刪除數字
    function delete_data() {
        if (data_list.length>=1) {
            data_list.pop();
            //刪除完陣列後，重新顯示
            show_data();
        }
    }

    //點選鍵盤事件
    $(".add_data").click(function(){
      data=$(this).attr("data");
      add_data(data);
    });

    //點選刪除事件
    $(".delete_btn").click(function(){
      delete_data();
    });

    //點選完成事件 將陣列轉化為字元 然後顯示字元
    $(".ok_btn").click(function(){
      data_str=data_list.join("");
      alert(data_str);
    });


</script>
</body>
</html>

相關文章