我正在尝试让javascript在我的页面中工作，但我总是将html放在实际页面上，但现在我想知道是否应该将<；在html之前编写src脚本，使代码正常工作，以引用javascript。我已经把所有的东西都排好了队，包括函数中的js和css。PHE它是：

<script src=\'https://artandleatherspencer.local/wp-content/themes/twentythirteen-child/js/myscript.js)

<div id="clockContainer">

<div id="hour"></div>

<div id="minute"></div>

<div id="second"></div>

</div>

下面是函数中的代码。php：

function childtheme_parent_styles() {
    wp_enqueue_style(\'parent\', get_template_directory_uri().\'/css/style.css\' );
    wp_enqueue_style(\'mytheme_main_style\', get_stylesheet_uri());
    wp_register_script(\'main-js\', get_stylesheet_directory_uri() . \'/js/main.js\');
    if( is_page(507) ) {
        wp_enqueue_script( \'main-js\');
    }
}

add_action( \'wp_enqueue_scripts\', \'childtheme_parent_styles\');

这里是主要的javascript。js文件夹中的js

console.log(\'executing scripts.js\');

setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
 
    hour.style.transform = `rotate(${hr_rotation}deg)`;
    minute.style.transform = `rotate(${min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

    

css：风格。css文件

#clockContainer {
    position: relative;
    margin: auto;
    height: 40vw;
    /*to make the height and width responsive*/
    width: 40vw;
    background: url(clock.png) no-repeat;
    /*setting our background image*/
    background-size: 100%;
}
  
#hour,
#minute,
#second {
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}
  
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
  
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
  
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
}