QML_计时控件功能实现

QML_计时控件功能实现

效果演示：

1、代码目录结构（新建的qt quick的工程）

2、两个重要文件的源码

CusDatetime.js

function formatSecondsToString(value) {
    var mss = value * 1000
    var h = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    var minute = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60))
    var second = (mss % (1000 * 60)) / 1000

    h = add_zero(h)
    minute = add_zero(minute)
    second = add_zero(second)

    return h + ':' + minute + ':' + second + '/'
}

function formatDateTime(timeStamp) {
    var date = new Date(timeStamp * 1000).toLocaleString(Qt.locale(),
                                                         "yyyyMMdd hh:mm")
    return date
}

function formatTime(timeStamp) {
    var resTime = ""

    var h = "0", m = "0", s = "0"

    s = timeStamp
    if (s > 59) {
        m = parseInt(s / 60)
        s = s - 60 * m
        if (m >= 60) {
            h = parseInt(m / 60)
            m = m - 60 * h
        }
    }

    h = add_zero(h)
    m = add_zero(m)
    s = add_zero(s)

    return h + ":" + m + ":" + s
}

function getCurDateTimeString() {
    var dateTimeArray = getLocalDateTimeArray()

    //获取当前时间日期
    var y = dateTimeArray[0]
    var m = dateTimeArray[1]
    var d = dateTimeArray[2]
    var hour = dateTimeArray[3]
    var min = dateTimeArray[4]
    var sec = dateTimeArray[5]

    return y + "-" + m + "-" + d + " " + hour + ":" + min + ":" + sec
}


/**
 获取本地时间数组
 */
function getLocalDateTimeArray() {
    var dateString = new Date().toLocaleString(Qt.locale(),
                                               "yyyy-MM-dd-hh-mm-ss")

    var SEPARATOR_BAR = "-"

    var dateArray
    if (dateString.indexOf(SEPARATOR_BAR) > -1) {
        dateArray = dateString.split(SEPARATOR_BAR)
    }

    return dateArray
}

function add_zero(temp) {
    if (temp < 10)
        return "0" + temp

    return temp
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

import "CusDatetime.js" as CusDatetime

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    property var timer_tick: 0
    property int timer_start: 1
    property int timer_pause: 2
    property int timer_stop: 3
    property int cur_timer: 0


    Label {
        text: qsTr("计时器")
        font.pointSize: 24
        anchors.left: parent.left
        anchors.top: parent.top
    }

    Label {
        id: label
        text: "00:00:00"
        font.pointSize: 24
        anchors.top: parent.top
        anchors.topMargin: 80

        Timer {
            id: label_timer
            interval: 1000
            running: false
            repeat: true
            onTriggered: {
                timer_tick += 1
                label.text = CusDatetime.formatTime(timer_tick)
                console.log(label.text)
            }
        }
    }

    Row {
        anchors.left: parent.left
        anchors.leftMargin: 120
        anchors.top: parent.top
        anchors.topMargin: 5
        spacing: 30

        Button {
            id: start_pause_button
            width: 100
            height: 50
            text: "开始"

            onClicked: {
                    cur_timer = timer_start
                    btnClick()
            }
        }

        Button {
            id: stop_button
            width: 100
            height: 50
            text: "重置"

            onClicked: {
                cur_timer = timer_stop
                btnClick()
            }
        }
    }

    function btnClick() {
        if (cur_timer === timer_stop) {
            timer_tick = 0
            label.text = "00:00:00"
            label_timer.running = false

        } else if (cur_timer === timer_start) {
            label_timer.running = true
        }
    }
}