Javascript 如何将js脚本正确加载到html/djangoTemplate中?
使用Django模板,我试图在javascript中添加一个倒计时。将脚本显式地放在HTML中确实有效,但在加载时无效。我想我很接近了,但我不知道缺少了什么:/ 下面是一段工作代码:Javascript 如何将js脚本正确加载到html/djangoTemplate中?,javascript,python,html,django,queryselector,Javascript,Python,Html,Django,Queryselector,使用Django模板,我试图在javascript中添加一个倒计时。将脚本显式地放在HTML中确实有效,但在加载时无效。我想我很接近了,但我不知道缺少了什么:/ 下面是一段工作代码: <!DOCTYPE html> <head> {% load staticfiles %} </head> <body> {% if remaining_time %} <script> function startTi
<!DOCTYPE html>
<head>
{% load staticfiles %}
</head>
<body>
{% if remaining_time %}
<script>
function startTimer(duration, display) {
var timer = duration;
var end = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(end);
document.form_submit_answer.submit()
}
}, 1000);
}
window.onload = function () {
var allowed_time_seconds = "{{remaining_time | safe}}",
display = document.querySelector('#time');
startTimer(allowed_time_seconds, display);
};
</script>
{% endif %}
{{ current_question.title }}
<div>
<form name="form_submit_answer" action="{% url 'assignment_completion' token current_question_num %}"
method="post">
{% csrf_token %}
{{ form }}
<div>
{% if next_question %}
<input type="submit" value="Send your answer and go to the next question">
{% else %}
<input type="submit" value="Send your answer and end the assignment">
{% endif %}
</div>
</form>
</div>
<div>
TOKEN : {{ token }}
</div>
{% if remaining_time %}
<div>Time remaining : <span id="time">{{initial_remaining_time}}</span></div>
{% endif %}
</body>
</html>
预期结果:显示初始时间然后递减到0,在0时,发送表单
在实践中,当将timer.js放入/static/js/timer.js时,只显示初始时间,然后什么也不会发生,就像从未加载和播放javascript一样
回溯:
(nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI是一个令牌)
试试这个:
如果它一直告诉您找不到特定的文件,那么您可能没有正确配置settings.py来知道静态目录应该在哪里 谢谢,它正在工作,我忘记了:
STATICFILES\u DIRS=(os.path.join(BASE\u DIR,“static”),
正如回答的那样,我还必须定义一个全局变量:``var remaining\u time\u js=“{{remaining\u time | safe}”``并在timer.js中使用它:``window.onload=function(){var allowed_time_seconds=remained_time_js,display=document.querySelector('#time');startTimer(allowed_time_seconds,display);}```
<head>
{% load staticfiles %}
{% if remaining_time %}
<script src="{ % static 'js/timer.js' % }"></script>
{% endif %}
</head>
[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/2 HTTP/1.1" 200 1017
Not Found: /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/{ % static 'js/timer.js' % }
[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/%7B%20%%20static%20'js/timer.js'%20%%20%7D HTTP/1.1" 404 2617