大家好，我是JavaScript的新手，我想拥有一个倒计时，该倒计时在页面加载时自动开始，并且仅在页面聚焦时才能恢复。这是一个示例<html>
<head>
<title>Billiger Verschiffen | <?php echo $title;?></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='css/custom.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form id="contactForm" class="contact-form" method="post" action="contact2.php" role="form" enctype="multipart/form-data">
<div class="controls">
<div class="row">
<div class="col-md-12">
<h1>Infos zum Auftraggeber</h1>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="firma">Firma *</label>
<input id="firma" type="text" name="firma" class="form-control" placeholder="Firma *" required="required" data-error="Firma wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="anrede">Anrede *</label>
<select id="anrede" name="anrede" class="form-control" required="required" data-error="Bitte Anrede auswählen.">
<option value=""></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="vorname">Firstname *</label>
<input id="vorname" type="text" name="vorname" class="form-control" placeholder="Bitte Vornamen eingeben *" required="required" data-error="Vorname wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="nachname">Lastname *</label>
<input id="nachname" type="text" name="nachname" class="form-control" placeholder="Bitte Nachname eingeben *" required="required" data-error="Nachname wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="straße">Straße *</label>
<input id="straße" type="text" name="straße" class="form-control" placeholder="Bitte Straße eingeben *" required="required" data-error="Straße wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="hausnummer">Hausnummer*</label>
<input id="hausnummer" type="text" name="hausnummer" class="form-control" placeholder="Bitte Hausnummer eingeben *" required="required" data-error="Hausnummer wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="plz">PLZ *</label>
<input id="plz" type="text" name="plz" class="form-control" placeholder="Bitte PLZ eingeben *" required="required" data-error="PLZ wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ort">ORT *</label>
<input id="ort" type="text" name="ort" class="form-control" placeholder="Bitte Ort eingeben *" required="required" data-error="Hausnummer wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row" style="padding-top:12px;">
<div class="col-md-12">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="CheckLiefer">
<label class="form-check-label" for="CheckLiefer">Diese Lieferadresse verwenden</label>
</div>
</div>
<div class="col-md-12">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="CheckLiefer2">
<label class="form-check-label" for="CheckLiefer2">Eine andere Lieferadresse verwenden</label>
</div>
</div>
</div>
<div class="row" id="lieferadresse" style="display: none; padding-top:30px;">
<div class="col-md-12">
<h1>Lieferadresse</h1>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="liefer_straße">Straße *</label>
<input id="liefer_straße" type="text" name="liefer_straße" class="form-control lieferadresse_req" placeholder="Bitte Straße eingeben *" data-error="Straße wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="liefer_hausnummer">Hausnummer*</label>
<input id="liefer_hausnummer" type="text" name="liefer_hausnummer" class="form-control lieferadresse_req" placeholder="Bitte Hausnummer eingeben *" data-error="Hausnummer wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="liefer_plz">PLZ *</label>
<input id="liefer_plz" type="text" name="liefer_plz" class="form-control lieferadresse_req" placeholder="Bitte PLZ eingeben *" data-error="PLZ wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="liefer_ort">ORT *</label>
<input id="liefer_ort" type="text" name="liefer_ort" class="form-control lieferadresse_req" placeholder="Bitte Ort eingeben *" data-error="Hausnummer wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row" style="padding-top:30px;">
<div class="col-md-12">
<h1>Buchungsdokumente</h1>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="FileUpload1">Upload für aktuelles Angebot des bisherigen Spediteurs für die geplante Verschiffung</label>
<input type="file" class="form-control-file" id="FileUpload1" required="required" name="uploaded_file">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="FileUpload2">Upload der Handelsrechnung für zu verschiffende Ware</label>
<input type="file" class="form-control-file" id="FileUpload2" name="FileUpload2">
</div>
</div>
</div>
<div class="row" style="padding-top:30px;">
<div class="col-md-12">
<h1>Absenderinformationen</h1>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lieferant_name">Name *</label>
<input id="lieferant_name" type="text" name="lieferant_name" class="form-control" placeholder="Name eingeben *" required="required" data-error="Name wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lieferant_email">Email *</label>
<input id="lieferant_email" type="email" name="lieferant_email" class="form-control" placeholder="E-Mail Adresse eingeben *" required="required" data-error="E-Mail wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lieferant_phone">Phone *</label>
<input id="lieferant_phone" type="text" name="lieferant_phone" class="form-control" placeholder="Telefonnummer eingeben *" required="required" data-error="Telefonnummer wird benötigt.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lieferant_erfahren">Wir haben Sie von uns erfahren? *</label>
<select id="lieferant_erfahren" name="lieferant_need" class="form-control" required="required" data-error="Bitte eine Antwort auswählen.">
<option value=""></option>
<option value="Sandro">Sandro von Eykels (Youtube-Kanal)</option>
<option value="Google">Google Suche</option>
<option value="Yahoo">Yahoo Suche</option>
<option value="Werbeanzeige">Sonstige Werbeanzeige</option>
<option value="Freunde">Von Bekannten/ Freunden</option>
<option value="Sonstige">Sonstige</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="message">Nachricht *</label>
<textarea id="message" name="message" class="form-control" placeholder="Nachricht" rows="4" required="required" data-error="Bitte hinterlasse uns eine Nachricht."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" id="submit" class="btn btn-success btn-send" value="Abschicken">
</div>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="messages" style="padding-top:20px;"></div>
</form>
</body>
</html>。
如何在
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from mpl_toolkits.mplot3d import art3d
from mpl_toolkits.mplot3d import proj3d
def rotation_matrix(v1,v2):
"""
Calculates the rotation matrix that changes v1 into v2.
"""
v1/=np.linalg.norm(v1)
v2/=np.linalg.norm(v2)
cos_angle=np.dot(v1,v2)
d=np.cross(v1,v2)
sin_angle=np.linalg.norm(d)
if sin_angle == 0:
M = np.identity(3) if cos_angle>0. else -np.identity(3)
else:
d/=sin_angle
eye = np.eye(3)
ddt = np.outer(d, d)
skew = np.array([[ 0, d[2], -d[1]],
[-d[2], 0, d[0]],
[d[1], -d[0], 0]], dtype=np.float64)
M = ddt + cos_angle * (eye - ddt) + sin_angle * skew
return M
def pathpatch_2d_to_3d(pathpatch, z = 0, normal = 'z'):
"""
Transforms a 2D Patch to a 3D patch using the given normal vector.
The patch is projected into they XY plane, rotated about the origin
and finally translated by z.
"""
if type(normal) is str: #Translate strings to normal vectors
index = "xyz".index(normal)
normal = np.roll((1,0,0), index)
path = pathpatch.get_path() #Get the path and the associated transform
trans = pathpatch.get_patch_transform()
path = trans.transform_path(path) #Apply the transform
pathpatch.__class__ = art3d.PathPatch3D #Change the class
pathpatch._code3d = path.codes #Copy the codes
pathpatch._facecolor3d = pathpatch.get_facecolor #Get the face color
verts = path.vertices #Get the vertices in 2D
M = rotation_matrix(normal,(0, 0, 1)) #Get the rotation matrix
pathpatch._segment3d = np.array([np.dot(M, (x, y, 0)) + (0, 0, z) for x, y in verts])
def pathpatch_translate(pathpatch, delta):
"""
Translates the 3D pathpatch by the amount delta.
"""
pathpatch._segment3d += delta
fig = plt.figure()
ax = fig.gca(projection='3d')
from matplotlib.patches import Circle, PathPatch
dirvec =(-0.420, -0.757, -0.500)
normal=dirvec
p = Circle((0,0), 18., facecolor = 'g', alpha = .6)
ax.add_patch(p)
pathpatch_2d_to_3d(p, z = 0, normal = normal)
pathpatch_translate(p, (0.,0.,0.) )
ax.quiver( 0.,0.,0., -0.420, -0.757, -0.500, length=50, color='g', lw=2, pivot='tail')
xlim( -50., 50. );ylim( -50., 50. );ax.set_zlim(-50.,50)
中使用相同的逻辑？
这是我的脚本：
http://hp30405.pythonanywhere.com/mz7z5/答案 0 :(得分：3)
您将$(window).blur()和$(window).focus()用于clearInterval和setInterval。请尝试以下操作
不幸的是，该代码段无法正常运行，但在代码段外部仍然可以正常运行
let downloadTimer;
var timeleft = 20;
downloadTimer = setInterval(countDown,1000)
function countDown(){
document.getElementById("timer").innerHTML = timeleft ;
timeleft -= 1;
if(timeleft < 0){
clearInterval(downloadTimer);
document.getElementById("timer").innerHTML = "20 sec done"
}
}
$(window).blur(function(){
console.log("blurred")
clearInterval(downloadTimer);
})
$(window).focus(function(){
console.log("focuesed")
downloadTimer = setInterval(countDown,1000);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer"></div>