JS自学笔记03
1简单响应式的页面
原理根据页面的宽度来改变 页面设置
比如手机端的横屏，竖屏
自定义窗口时，菜单栏位置的变化等等。。。很多啊
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
@media screen and (min-width:1000px ) {
/*当页面宽度width大于1000px时候,执行下面的*/
.one{
height: 100px;
width: 200px;
background: darkcyan;
}
}
@media screen and (max-width:1500px){
/*当页面宽度width小于1500px时候,执行下面的*/
.one{
height: 100px;
width: 200px;
background: yellow;
}
}
@media screen and (min-width:1000px)and (max-width:1500px){
/*当页面宽度width大于1000px小于1500px时候,执行下面的*/
.one{
height: 100px;
width: 200px;
background: #DAA520;
}
}
@media screen and (orientation:landscape){
/*orientation:landscape 移动端(手机端)的横屏显示*/
.one{
height: 100px;
width: 200px;
background: black;
}
}
@media screen and (orientation:portrait){
/*orientation:landscape 移动端(手机端)的竖屏显示*/
.a1{
height: 100px;
width: 200px;
background: aqua;
}
/*@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。*/
/*当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。*/
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
setInterval（）每过多少时间运行一次
setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行:
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
#div-two {
width: 400px;
height: 50px;
}
</style>
<script type="text/javascript">
setInterval("clock()", 100);
// 每过100毫米调用clock()函数，反复执行
function clock() {
var time = new Date();
document.getElementById("div-two").value = time
}
</script>
</head>
<body>
<div>
<input type="text" name="" id="div-two" />
</div>
</body>
</html>
clearInterval()
用来定制 setInterval() 函数的反复操作停止执行:
<!DOCTYPE html>
<html lang="zh">
<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>
<p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p>
<button onclick="stopColor()">停止切换</button>
<script>
var myVar = setInterval(function() {
setColor()
}, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar); //myVar = setInterval(function()上面的函数名
}
</script>
</body>
</html>
setTimeout()延时
setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码
这里是运用递归原理进行一个反复的运行函数 实现和上面setInterval函数的相似效果。
<!DOCTYPE html>
<html lang="zh">
<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>
<script type="text/javascript">
var num = 0;
function timeCount() {
document.getElementById("div-third").value = num
num += 1;
setTimeout("timeCount()", 1000)
}
setTimeout("timeCount()", 1000)
</script>
</head>
<body>
<div>
<input type="text" name="" id="div-third" />
</div>
</body>
</html>
页面广告
网页广告需要点击多次才能进行关闭，延时显示广告
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
#div-four {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div onclick="foo()" id="div-four"></div>
<script type="text/javascript">
var num = 0;
function foo() {
num += 1;
if(num > 3) {
document.getElementById("div-four").style.display = "none"
} else {
window.open("https://www.baidu.com")
// 点击三次过后再点击进行消失，不然就跳转网站
}
}
setTimeout("silyb()", 10000)
// 延时处理setTimeout(调用的函数,多少毫米进行调用一次 )这里时间的计时是从页面开始加载计算起
// 所有有时候如果点击过程的时间超过了这个时间就不会执行
function silyb() {
document.getElementById("div-four").style.display = "block"
}
</script>
</body>
</html>
前端注册页面的input输入框判断的简单原理
检查input 输入框密码栏 账号栏 其他栏的内容是否为空，两次密码是否为空
多选项框，单选项框是否为空
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-2.1.0.js">
</script>
</head>
<body>
<form action="test.html" name="myForm">
账号<input type="text" name="account" id="sss" /><br /> 密码
<input type="password" id="ssss" /><br /> 验证密码
<input type="password" /><br /> 性别
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女
<br /> 爱好
<input type="checkbox" name="hobby" value="1" />吃
<input type="checkbox" name="hobby" value="2" />喝
<input type="checkbox" name="hobby" value="3" />玩
<input type="submit" onclick="return foo()">
</form>
<script type="text/javascript">
function foo() {
var acc = document.forms['myForm']['account'].value;
// 定义一个acc 接收 name="account" 的value值
// console.log(acc) //控制台里输出value值
if(acc == null || acc == '') {
alert('账号不能为空！');
return false;
}
// 这里return false 是返回给 提交按钮 一个值,让return foo()进行判断 ,为真则执行,为假则停止
var abc1 = document.getElementById("sss").value;
console.log(abc1)
var abc2 = document.getElementById("ssss").value;
console.log(abc2)
if(abc1 == null || abc1 == '') {
alert('密码不能为空！');
return false;
} else if(abc2 == null || abc2 == '') {
alert('重复输出密码不能为空');
return false;
} else if(abc2 != abc1) {
alert("两次密码不同，请重新输入")
return false;
}
// 同理进行判断密码栏，注意else if 不能像Python里面一样用elif
var sex = document.getElementsByName('sex');
if(sex[0].checked == sex[1].checked) {
// sex[0]是为了拿到名字sex,这是getElementsByName返回的是一个集合,要用下标进行读取
// sex[0]为 男 的选择框 sex[1]为女的选择框 让他们的checked的属性进行判断
// checked=""默认选中，判断他们是选择，因为这是个单选项
alert('请选择性别');
return false;
}
var isLike = false;
var hobby = document.getElementsByName('hobby');
for(var i = 0; i < hobby.length; i++) {
if(hobby[i].checked) {
isLike = true;
// 如果checked 为真则 赋值true给变量 isLike，并下面break结束循环
break;
}
}
if(!isLike) {
// checked 为假则执行下面的语句
alert('请选择爱好！')
return false
}
}
</script>
</body>
</html>
循环处理
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
div {
text-align: center;
}
.a1 {
height: 50px;
width: 100px;
text-align: right;
}
.a2 {
width: 400px;
height: 50px;
text-align: center;
}
.a3 {
text-align: center;
}
</style>
<script type="text/javascript">
function foo5() {
var list = ["zhanghao","mima","yanzhengmima","youxiang","nianling","xingbie","aihao","chengshi"]
var list1 = ["'账号栏'", "'密码栏'", "'验证密码栏'", "'邮箱栏'", "'年龄栏'", "'性别栏'", "'爱好栏'", "'城市栏'"]
var num = 0;
console.log(list[num])
while(num < 7) {
var a = document.getElementById(list[num]).value
if(a == "" || a == null) {
return alert(list1[num] + "不能为空");
} else {
num += 1;
}
}
alert("注册成功")
return window.open("https://www.baidu.com"), window.close("file://C:/Users/admin/HBuilderProjects/hello web/js/js03.html")
}
</script>
</head>
<body>
<div>
<form action="" method="post">
<table border="" cellspacing="" cellpadding="">
<tr>
<td class="a1">账号:</td>
<td class="a2"><input type="text" name="zhanghao" id="zhanghao" /></td>
</tr>
<tr>
<td class="a1">密码:</td>
<td class="a2"><input type="password" name="mima" id="mima" /></td>
</tr>
<tr>
<td class="a1">验证密码:</td>
<td class="a2"><input type="password" name="yanzhengmima" id="yanzhengmima" /></td>
</tr>
<tr>
<td class="a1">邮箱:</td>
<td class="a2"><input type="text" name="youxiang" id="youxiang" /></td>
</tr>
<tr>
<td class="a1">年龄:</td>
<td class="a2"><input type="text" name="nianling" id="nianling" /></td>
</tr>
<tr>
<td class="a1">性别:</td>
<td class="a2"><input type="text" name="xingbie" id="xingbie" /></td>
</tr>
<tr>
<td class="a1">爱好:</td>
<td class="a2"><input type="text" name="aihao" id="aihao" /></td>
</tr>
<tr>
<td class="a1">城市:</td>
<td class="a2"><input type="text" name="chengshi" id="chengshi" /></td>
</tr>
<tr>
<td class="a1">个性签名:</td>
<td class="a2"><input type="text" name="qianming" id="qianming" /></td>
</tr>
<tr>
<td colspan="2" class="a3"><input type="button" name="tijiao" id="tijiao" value="提交" onclick="foo5()" />    
<input type="reset" name="chongzhi" id="chongzhi" value="重置" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>