发表于： 2020-04-17 23:57:38
1 1843
今天完成的事情：今天写了一个倒计时以及密码显示隐藏的页面
明天计划的事情：继续后续的学习
遇到的问题：实际操作还是太少需要更多的练习
收获：今天写了一个仿时钟式的倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
span {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i {
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
//倒计时
var count = 1;
var Counter;
function countDown() { //调用
Counter = setInterval(f, 1000);
}
countDown(); //自运行
//倒计时
function f() {
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if (hs == 0 && ms == 0 && ss == 0 || ss > 60 || ms > 60 || hs > 24) {
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if (ss > 0) {
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if (ss == 0) {
if (ms > 0) {
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if (ms == 0) {
if (hs > 0) {
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
</body>
</html>
运行结果
另外写了一个显示密码和隐藏密码的输入方式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form method="POST" action="" name="forms">
<span id=box><input type="password" name="password" size="80" style="width:150;" value="sina.com"></span>
<span id=click><a href="javascript:showps()">显示密码</a></span>
</form>
</body>
<script language="JavaScript">
function showps() {
if (this.forms.password.type = "password") {
document.getElementById("box").innerHTML = "<input type=\"text\" name=\"password\" size=\"80\" style='width:\"150\";' value=" + this.forms.password.value + ">";
document.getElementById("click").innerHTML = "<a href=\"javascript:hideps()\">隐藏密码</a>"
}
}
function hideps() {
if (this.forms.password.type = "text") {
document.getElementById("box").innerHTML = "<input type=\"password\" name=\"password\" size=\"80\" style='width:\"150\";' value=" + this.forms.password.value + ">";
document.getElementById("click").innerHTML = "<a href=\"javascript:showps()\">显示密码</a>"
}
}
</script>
</html>
运行结果
点击显示
明天改进一下兵继续后面的学习
返回列表
评论