Qml----webengine打开的页面根据系统时区修改,javascript同理

注意webengine只有msvc编译环境才能用

main.qml

c++ 复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtWebEngine 1.9


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

    WebEngineView{
        anchors.fill:parent;
        url:"./test.html"
    }
}

test.html

复制代码
<!DOCTYPE html>
<html lang ="zh-CN">
<head>test
<meta charset="UTF-8">

</head>
<script>
function updateTime(){
    var now = new Date();
    var timestamp = 1609459200000; //2021-01-01 00.00.00 utc
    var localTime = new Date(timestamp);


    //跟新当前时间
    document.getElementById('current-time').textContent = unChangeTimezone(now);

    //跟新时间戳
    document.getElementById('timestamp-time').textContent = unChangeTimezone(localTime);

    //跟新修改的当前时间
    document.getElementById('change-current-time').textContent = ChangeTImezone(now).toString();

    //跟新修改的时间戳
    document.getElementById('change-timestamp-time').textContent = ChangeTImezone(timestamp).toString();
}

window.onload = function(){
    setInterval(updateTime,1000);
    updateTime();
}
function unChangeTimezone(n){
    var now = new Date(n)
    y = now.getFullYear();
    m = now.getMonth()+1;
    d = now.getDate();
    return y + "-" + (m<10? "0"+m : m) + "-" + (d <10 ? "0"+d:d) + " " +now.toTimeString().substr(0,8);
}

function ChangeTImezone(datevalue){

    //获取本地时区
    timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    document.getElementById('timezone').textContent = timezone;

    const options = {
        year:'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12:false,
        timeZone:timezone
    };
   
    const parts = new Intl.DateTimeFormat('zh-CN',options).formatToParts(datevalue);
    // if(datevalue instanceof Date && !isNaN(datevalue.getTime())){
    //     //有效Date对象
    //     const parts = formatter.formatToParts(datevalue);
    // }
    // else if(typeof datevalue === 'number' && !isNaN(datevalue)){
    //     //有效时间戳
       
    //     const parts = formatter.formatToParts(new Date(datevalue));
    // }

    // 手动拼接成 'YYYY-MM-DD HH:MM:SS' 格式
    const year = parts.find(part => part.type === 'year').value;
    const month = parts.find(part => part.type === 'month').value;
    const day = parts.find(part => part.type === 'day').value;
    const hour = parts.find(part => part.type === 'hour').value;
    const minute = parts.find(part => part.type === 'minute').value;
    const second = parts.find(part => part.type === 'second').value;
    return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}

</script>
<body>
    <p>当前时间:<span id = "current-time"></span></p>
    <p>时间戳时间(utc2021-01-01 00.00.00):<span id = "timestamp-time"></span></p>
    <p>修改后的当前时间:<span id = "change-current-time"></span></p>
    <p>修改后时间戳时间(北京时间应该为2021.01.01 08):<span id = "change-timestamp-time"></span></p>
    <p>显示时区 <spad id = "timezone"></spad></p>
</body>
</html>​

手动修改电脑的时区,网页上也会修改

相关推荐
sql2008help36 分钟前
使用spring-boot-starter-validation实现入参校验
java·开发语言
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
chilavert3184 小时前
技术演进中的开发沉思-62 DELPHI VCL系列:VCL下的设计模式
开发语言·delphi
晨非辰5 小时前
#C语言——刷题攻略:牛客编程入门训练(六):运算(三)-- 涉及 辗转相除法求最大公约数
c语言·开发语言·经验分享·学习·学习方法·visual studio
柑橘乌云_6 小时前
vue中如何在父组件监听子组件的生命周期
前端·javascript·vue.js
钢铁男儿7 小时前
C# 异步编程(计时器)
开发语言·c#
江湖人称小鱼哥7 小时前
react接口防抖处理
前端·javascript·react.js
小王不爱笑1327 小时前
Java项目基本流程(三)
java·开发语言
GISer_Jing7 小时前
腾讯前端面试模拟详解
前端·javascript·面试
萌萌哒草头将军8 小时前
🚀🚀🚀 Webpack 项目也可以引入大模型问答了!感谢 Rsdoctor 1.2 !
前端·javascript·webpack