倒数计时器链接设计部分答案

【问题标题】：Countdown Timer Linking Design Parts倒数计时器链接设计部分
【发布时间】：2022-12-03 01:19:43
【问题描述】：

我有一些 HTML 和 JavaScript，但出现此错误：

我正在构建一个计时器。这是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Timer</title>
</head>
<body>
    <div class="timer">
        
    </div>
<script src="appCT.js" type="module"></script>
</body>
</html>

JavaScript文件1

export default class Timer {
    constructor(root){
        console.log(root);
        root.innerHTML = Timer.getHTML();

        this.el = {
            minutes: root.querySelector(".timer__part--minutes");
            seconds: root.querySelector(".timer__part--seconds");
            control: root.querySelector(".timer__btn--control");
            reset: root.querySelector(".timer__btn--reset");
        }

        console.log(this.el);
    }

    static getHTML(){
         return `
        <span class="timer__part timer__part--minutes">00</span>
        <span class="timer__part timer__part">:</span>
        <span class="timer__part timer__part--seconds">00</span>
        <button type="button" class="timer__btn timer__btn--control timer__btn--start">
            <span class="material-icons">play_circle_filled</span>
        </button>
        <button type="button" class="timer__btn timer__btn--reset">
            <span class="material-icons">timer</span>
        </button>` 
    }
}

JavaScript 文件 2

import Timer from "Timer.js";

new Timer{
    document.querySelector(".timer");
}

CSS代码

body{
    background: #dddd;
    margin: 24px;

}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__part{
    font-size: 40px;
    font-weight: bold;

}

.timer__btn{
    width: 50px;
    height: 50px;
    margin-left: 16px;
    border-radius: 50%;
    border: none;
    background: gray;
}

.timer__btn--control{
    background: steelblue;
}

.timer__btn--reset{
    background: red;
}

代码应该能够显示计时器，并且每个 HTML 元素都应该与其在设计中的相应部分相关联。我试图将我的脚本元素的类型“属性”更改为文本/javascript，但它没有产生结果。

谢谢

【问题讨论】：

标签： javascript html timer

【解决方案1】：

您的浏览器不会重定向到这样的地址。我建议尝试使用 localhost。我发现了一些可能对你有用的东西。

"Cross origin requests are only supported for HTTP." error when loading a local file

【讨论】：