시간 자동 업데이트 및 필터 사용자 정의(19)

댓글 시간 삽입 및 자동 업데이트

    
        var log = function() {
            console.log.apply(console, arguments)
        }

        var es = function (sel) {
            return document.querySelectorAll(sel)
        }

        var registerTimer = function () {
            setInterval(function () {
                var times = es('.gua-time')
                for (var i = 0; i < times.length; i++) {
                    var t = times[i]
                    var time = Number(t.dataset.ct)
                    log('time', time)
                    var now = Math.floor(new Date() / 1000)
                    var delta = now - time
                    var y = Math.floor(delta/3600/24/365)
                    var m = Math.floor((delta - y*3600*24*365)/3600/24/30)
                    var d = Math.floor((delta-y*3600*24*365 - m*3600*24*30)/3600/24)
                    var h = Math.floor((delta-y*3600*24*365 - m*3600*24*30 - d*3600*24)/3600)
                    var s = `${y}   ${m}   ${d}   ${h}  `
                    t.innerText = s
                }
            }, 1000)
        }

        var __main = function () {
            registerTimer()
        }

        __main()

    

클래스 이름을 통해 모든 노드를 가져오고, 모든 노드를 반복해서 데이터를 삽입합니다.

data-ct = {t.ct}} DOM 중 dataset 속성 대상이 있습니다. 여기data-는 약속된 접두사로 생성DOM 시 data-로 시작하는 모든 속성은 접두사data-를 제거하고 나머지는 dataset에 저장하기 때문에 js 에서 ele.dataset.ct 값을 얻습니다.js가 서버의 데이터를 쉽게 얻을 수 있습니다.

때때로 HTML 요소에 추가 정보를 귀속시키는데, 특히 JS가 이 요소들을 선택할 때 특히 도움이 된다.일반적으로 getAttribute () 와 setAttribute () 를 사용하여 제목이 아닌 속성의 값을 읽고 씁니다.그러나 이 때문에 문서가 더 이상 합법적이고 유효한 HTML이 아니라는 대가를 치르게 된다.이에 따라 HTML5는 하나의 솔루션을 제공합니다.HTML5 문서에서 "data-"를 접두사로 하는 소문자의 속성 이름은 모두 합법적입니다.이러한'데이터 집합 속성'은 그 요소의 표현에 영향을 미치지 않을 것이다. 그들은 문서의 합법성에 양보하지 않고 표준적이고 추가 데이터를 추가하는 방법을 정의했다.HTML5는 Element 객체에 dataset 속성도 정의합니다.이 속성은 접두사를 뺀 데이터-속성에 대응하는 대상을 가리킨다.따라서 데이터 세트.x는 데이터-x 속성의 값을 저장해야 합니다.하이픈이 있는 속성은 낙타봉 명명법 속성 이름에 대응합니다.예를 들어 Element 속성 data-jquery-test는 js에서 dataset에 대응합니다.jqueryTest 속성입니다.
데이터세트 속성은 Element의 데이터-속성의 실시간, 양방향 인터페이스입니다.데이터 세트의 속성을 설정하거나 삭제하는 것은 해당 요소의 데이터 속성을 설정하거나 제거하는 것과 같습니다.

Number() 함수는 파라미터를 숫자로 변환하는 데 사용됩니다.

Math.floor() 함수는 파라미터를 소수로 제거하는 데 사용된다.

new Date() 함수는 현재unix 시간

을 가져오는 데 사용됩니다.

${var}은js의 템플릿 문자열

마지막으로 텍스트 삽입 innerText

setInternal()는 자동 리셋 함수이고 첫 번째 매개 변수는 시간 함수이며 두 번째 매개 변수는 몇 시간에 한 번 리셋하고 단위는 밀리초이다.

사용자 정의 필터

app.py
@app.add_template_filter
def test1(input):
    r = 'process {} using test filter'.format(input)
    return r

    

        
{{ topic.content|test1 }}
    

test1 () 함수는 topic를 사용합니다.content 매개 변수 값으로 함수 전송