JavaScript-使用JS-Stack溢出根据输入时区更改时间

顺晟科技

2022-10-19 12:41:16

179

我想做一个简单的时钟项目。在这个项目中，用户必须从组合框中选择一个时区，当单击其中一个时区时，主时间(ID=digital-clock)必须随时区时间而改变。我有一个包含所有时区的txt文件（zone.txt）。这是我的代码：（它在这里不作为代码片段工作）。

我尝试使用此代码，但它不起作用:

<!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>

我在我的项目中使用Boostrap5、jquery和ajax。在我看来，问题出在这条线上：。我怎么做？我想设置一个时区变量作为属性。我在javascript控制台中出现了这个错误:

<!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>

顺晟科技：

时区：时区 更改为 时区:timezone.value

try=>this

上一篇：html-“无法在nuxt.js应用下一篇：JavaScript-使图标在Mou

网站建设

Html

JavaScript-使用JS-Stack溢出根据输入时区更改时间