반응형
반응형

getMilliseconds() returns the milliseconds (0 to 999) of a date.  현재의 밀리세컨드를 반환

getMilliseconds() 메서드는 Date 인스턴스의 밀리초를 현지 시간 기준으로 반환합니다.

 

getTime() returns the number of milliseconds since January 1, 1970 00:00:00.  : 1970-01-01 부터의 밀리세컨드값을 반환

1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자입니다.

 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

 

Date.prototype.getTime() - JavaScript | MDN

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.

developer.mozilla.org

 

.getTime()  https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_gettime_year 

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getTime() Method</h2>

<p>Calculate the number of years since January 1, 1970:</p>

<p id="demo"></p>
<p id="demo2"></p>

<script>
// Calculate milliseconds in a year
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const year = day * 365;

// Divide Time with a year
const d = new Date();
let years = Math.round(d.getTime() / year); 

document.getElementById("demo").innerHTML = years;
document.getElementById("demo2").innerHTML = d.getTime();

// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
var birthday = new Date(1994, 12, 10);
var copy = new Date();
copy.setTime(birthday.getTime());

</script>

</body>
</html>

 

.getMilisecond()  https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_datetime_millisec 

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>

<p>Add zeros and colons to display the time:</p>

<p id="demo"></p>

<script>
function addZero(x,n) {
  while (x.toString().length < n) {
    x = "0" + x;
  }
  return x;
}

const d = new Date();
let h = addZero(d.getHours(), 2);
let m = addZero(d.getMinutes(), 2);
let s = addZero(d.getSeconds(), 2);
let ms = addZero(d.getMilliseconds(), 3);
let time = h + ":" + m + ":" + s + ":" + ms;
document.getElementById("demo").innerHTML = time;
</script>

</body>
</html>
반응형
반응형

Date.getTime()으로 날짜/시간 비교

Date.getTime()는 UTC 시간을 millisecond로 리턴합니다. UTC는 1970/01/01를 0초로 지금까지 흐른 시간을 표현한 것입니다. millisecond이기 때문에 비교 연산자를 이용하여 크기를 비교할 수 있고, 또한 동등 연산자로 비교할 수도 있습니다.

const date1 = new Date('2022-05-04');
const date2 = new Date('2022-05-05');

console.log('date1: ' + date1.getTime());
console.log('date2: ' + date2.getTime());

console.log(date1.getTime() > date2.getTime());
console.log(date1.getTime() >= date2.getTime());
console.log(date1.getTime() < date2.getTime());
console.log(date1.getTime() <= date2.getTime());
console.log(date1.getTime() == date2.getTime());

 

날짜 복사에 getTime () 사용

동일한 시간 값으로 날짜 객체를 생성합니다.

// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
var birthday = new Date(1994, 12, 10);
var copy = new Date();
copy.setTime(birthday.getTime());

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

 

Date.prototype.getTime() - JavaScript | MDN

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.

developer.mozilla.org

 

반응형
반응형

each()문을 써야하는 이유는 무엇일까 특징을 살펴보자?

1. 일반 for문보다 가독성이 좋다
2. 객체형을 다루기가 쉽다.
3. Array 객체에서 사용가능
4. 빠른편이다.
5. 리턴값을 받지 못한다.

 

for, foreach, each 

var arr= [ 
			{name : '알리송', backnumber : '1'}
          , {name : '반다이크', backnumber : '4'} ];

//for문
for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].name);
  console.log(arr[i].backnumber);
  console.log(arr[i].name + arr[i].backnumber);
};


foreach문
arr.forEach (function (el, index) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});


$.each문
$.Each (arr, function (index, el) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});
반응형
반응형

 IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)

   : 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

(function () {
    statements
})();

첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

 

아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다.

(function () {
    var aName = "Barry";
})();
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

 

IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
var result = (function () {
    var name = "Barry";
    return name;
})();
// 즉시 결과를 생성한다.
result; // "Barry"

 

반응형
반응형

Toggle Fullscreen

하나의 버튼으로 전체화면과 일반화면을 토글시키고 싶다면 아래와 같이 사용합니다.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

https://www.cckn.dev/js-ts/20210519-fullscreen/

반응형
반응형

How copy and paste excel columns to HTML table with inputs?

엑셀의 내용 카피해서 웹화면 input에 순서대로 붙여넣기.

 

https://www.codeproject.com/Questions/1212303/How-copy-and-paste-excel-columns-to-HTML-table-wit

 

[Solved] How copy and paste excel columns to HTML table with inputs? - CodeProject

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900

www.codeproject.com

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

</head>

<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
        </thead>
        <tbody>
            <tr>
                <td><input  type="text"></td>
                <td><input type="text"></td>
                <td><input  type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function () {
            $('td input').bind('paste', null, function (e) {
                $txt = $(this);
                setTimeout(function () {
                    var values = $txt.val().split(/\s+/);
                    var currentRowIndex = $txt.parent().parent().index();
                    var currentColIndex = $txt.parent().index(); 
                    
                    var totalRows = $('#example tbody tr').length;
                    var totalCols = $('#example thead th').length;
                    var count =0;
                    for (var i = currentColIndex; i < totalCols; i++) {
                        if (i != currentColIndex)
                            if (i != currentColIndex)
                                currentRowIndex = 0;
                        for (var j = currentRowIndex; j < totalRows; j++) {                           
                            var value = values[count];
                            var inp = $('#example tbody tr').eq(j).find('td').eq(i).find('input');
                            inp.val(value);
                            count++;
                           
                        }
                    }


                }, 0);
            });
        });
    </script>

</body>
</html>

 

반응형

+ Recent posts