第26天,字符跳动,弹出层效果

字符跳动:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<font id="show" size='6'></font>
</body>
<script>
var mes = '1234567890';
var i = 0;
setInterval(function() {
if (i >= mes.length) i = 0;
document.getElementById("show").innerHTML = show(i, mes);
i++;
}, 100);

function show(i, mes) {
//substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
var tt = mes.substr(0, i);
tt += '<font size=7 color=red>' + mes[i] + '</font>'
//表示从i+1位置到末尾
tt += mes.substr(i + 1);
return tt;
}
</script>

</html>

弹出层效果(自己的,下方还有完整版):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>弹出层</title>
</head>
<style>
#model {
width: 400px;
height: 400px;
background-color: blue;
/* fixed固定定位 */
position: fixed;
top: 50%;
left: 50%;
margin-left: -220px;
margin-top: -170px;
color: #fff;
padding: 20px;
/* 让界面位于最上方 */
z-index: 10001;
display: none;
}

#model span {
/* 鼠标变手 */
cursor: pointer;
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
}
</style>

<body>
<button onclick="login()">登陆</button>
<div id="model">
<h3>登陆框</h3>
<span onclick="lose()">X</span>
</div>
<script>
function login() {
//显示出隐藏页面
model.style.display = 'block';
}

function lose() {
//把页面隐藏
model.style.display = 'none';
}
</script>
</body>

</html>

弹出框(所给版本):

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>弹出层</title>
<script>
</script>
<style>
.container {
height: 3000px;
}

#modal {
width: 400px;
height: 300px;
background-color: #369;
position: fixed;
top: 50%;
left: 50%;
margin-left: -220px;
margin-top: -170px;
color: #fff;
padding: 20px;
z-index: 10001;
display: none;
}

#modal span {
cursor: pointer;
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
}

#opcity {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: fixed;
background: rgba(0, 0, 0, 0.6);
display: none;
}
</style>
</head>

<body>
<h1>弹出层效果</h1>
<hr>
<button onclick="login()">登录</button>
<div class="container">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>

<div id="modal">
<h3>登录框</h3>
<span onclick="closeBox()">X</span>
</div>

<div id="opcity"></div>
<script>
function login() {
modal.style.display = "block";
opcity.style.display = "block";
}

function closeBox() {
//alert('ok');
modal.style.display = "none";
opcity.style.display = "none";
}

opcity.onclick = function() {
modal.style.display = "none";
opcity.style.display = "none";
}
</script>


</body>

</html>

  目录