使用JS根据输入时区更改时间
Posted
技术标签:
【中文标题】使用JS根据输入时区更改时间【英文标题】：Change time based on input timezone with JS 【发布时间】：2021-11-17 02:03:29 【问题描述】：我想做一个简单的时钟项目。 在这个项目中，用户必须从组合框中选择一个时区，当单击其中一个时，主时间（id=digital-clock）必须随时区时间而变化。 我有一个包含所有时区的 txt 文件 (zone.txt)。 这是我的代码：（在这里它不能作为 sn-p 工作）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clockify</title>
<link rel="shortcut icon" href="http://cdn.onlinewebfonts.com/svg/img_461716.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
body
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
font: open-sans-serif;
a
text-decoration: none;
color: black;
@keyframes gradient
0%
background-position: 0% 50%;
50%
background-position: 100% 50%;
100%
background-position: 0% 50%;
.dst-btn
margin-right: 75px;
</style>
</head>
<body class="unselectable">
<div class="time-label">
<div id="analog-clock" class="clock" style="margin-left:200px; margin-top: -180px;">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<div id="digital-clock" style="margin-top:-350px;"><span id="time" style="font-size:170px;font-weight:bold;color:#fff;"></span></div>
<br><br><br>
<div class="buttons animate__animated animate__bounceInUp" style="display: inline-block;">
<button type="button" class="btn btn-light btn-lg dst-btn">Alarm</button>
<select onchange="changeTimeZone();" style="padding: 10px;border-radius: 5px;padding-bottom:-2px;width:200px;" class="btn btn-light dst-btn" name="timezone-label" id="timezone-label" aria-required="true">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js "></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js "></script>
<script>
// Load data from file ['Europe/Rome, Europe/Amsterdam, etc.'] into combobox
$.ajax(
url: 'zone.txt',
success: function(data)
var splitData = data.split("\n");
for(i = 0; i <= splitData.length; i++)
$('#timezone-label').append("<option id='timezone-label' value='" + splitData[i] + "'>" + splitData[i] + "</option>");
);
</script>
</select>
<button id="style" type="button" class="btn btn-light btn-lg dst-btn">Style</button>
<button id="stopwatch" type="button " class="btn btn-light btn-lg dst-btn "><a href="stopwatch.html">Stopwatch</a></button>
<button type="button" class="btn btn-light btn-lg dst-btn ">Countdown</button>
</div>
</div>
<script>
function changeTimeZone()
var timeZone = document.getElementById('timezone-label');
const str = new Date().toLocaleString('it-IT',
timeZone: timeZone
);
var myArray = str.split(",");
document.getElementById("time").innerHTML = myArray[1];
</script>
</body>
</html>我尝试使用此代码，但它不起作用：
function changeTimeZone()
var timeZone = document.getElementById('timezone-label');
const str = new Date().toLocaleString('it-IT',
timeZone: timeZone
);
var myArray = str.split(",");
document.getElementById("time").innerHTML = myArray[1];
我在我的项目中使用 boostrap 5、jquery 和 ajax。
在我看来，问题出在这一行：timeZone: timeZone。我该怎么做？我想将时区变量设置为属性。
我在 javascript 控制台中有这个错误：
Uncaught RangeError: Invalid time zone specified: [object HTMLSelectElement]
at Date.toLocaleString (<anonymous>)
at changeTimeZone (clocks.html:87)
at HTMLSelectElement.onchange (clocks.html:62)
【问题讨论】：
【参考方案1】：时区：时区 改为 时区：timeZone.value
试试 => This
【讨论】：
删除边距顶部 和以上是关于使用JS根据输入时区更改时间的主要内容，如果未能解决你的问题，请参考以下文章