1. 程式人生 > >用JS來顯示當前時間並自動重新整理和用JS對錶格資料修改儲存

用JS來顯示當前時間並自動重新整理和用JS對錶格資料修改儲存

通過這兩天的學習已經可以做到用JS來做一些簡單的表格增刪,今天的課上練習主要在以下兩個方面:

用JS來顯示當前的時間並用中文表示,這個比較簡單,只需要獲取當前的時間,並在單位後加上中文的單位就可以:

                        var myDate=new Date();

                   var year=myDate.getFullYear();

var month=myDate.getMonth()+1;
var date=myDate.getDate();
var d=myDate.getDay();
var weekday=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();

         document.getElementById('dd').innerHTML=year+'年'+month+'月'+date+'日'+weekday[d]+h+'時'+m+'分'+s+'秒';

但是這個程式只能輸出一個當前的時間,並不能自動重新整理,這就用到了setInterval()方法 在上面程式碼外面賦予一個函式,後面加上一個setInterval(a,1000),就可以實現自動重新整理,其中1000代表的是間隔時間,單位是ms.

昨天做了表格的增刪,今天學習了對錶格內容的修改。要做到這樣的效果,就要對錶格的資料驚醒監聽,然後修改後點選按鈕進行儲存。temp.addEventListener('dblclick',function(){
    var oldValue=this.innerHTML;
    var inputElement='<input class="edit" type="text" value="'+oldValue+'">';

    this.innerHTML=inputElement;

用上面的程式碼就可以實現監聽,並且雙擊可以變為輸入框,這樣就可以實現對資料的修改,然後做出一個儲存的函式

function saveEditLine(obj){
            var tr=obj.parentNode.parentNode;
            var allEdit=tr.querySelectorAll('.edit');
            for (i=0;i<allEdit.length;i++){
            var  newValue=allEdit[i].value;
            allEdit[i].parentNode.innerHTML=newValue;
                }

             }

通過簡單的陣列來儲存新的資料。

總的學下來感覺就是通過觀看視訊可以做出來,但是在實際做的時候會發現有很多東西可能以前課上聽過,但是真正用還是第一次,感覺很多東西還是新的,總是不能把學到的很連貫的用起來,只能按照老師演示的思路來,但是實現程式的方法還有很多,並不能很好的找到那種敲程式碼的感覺,接下來要對一些基本的知識多加記憶,練習,才能離自己的要求更進一步。