车牌号限行案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--样式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
position: relative;
height: 200px;
/*background-color:darkgoldenrod;*/
border-bottom: 1px solid gray;
}
#box{
/*定位*/
position: absolute;
bottom: 10px;
/*水平方向居中*/
width: 100%;
text-align: center;
}
#carNum{
width: 400px;
height: 50px;
text-align: center;
font-size: 35px;
border: 0;
border-bottom: 1px dotted lightgray;
vertical-align: bottom;
}
#carNum:focus{
outline: 0;
}
button{
border: 0;
width: 70px;
height: 40px;
background-color: red;
color: white;
font-size: 25px;
}
/*结果的样式*/
.result{
text-align: center;
font-size: 30px;
color: darkcyan;
}
</style>
</head>
<body>
<div id="top">
<div id="box">
<input type="text" id="carNum" value="" placeholder="请输入车牌号" />
<button onclick="search()">查询</button>
<button onclick="clearResult()">清除</button>
</div>
</div>
<div id="bottom"></div>
<!--js代码-->
<script type="text/javascript">
//查询
function search(){
//1.检查输入的车牌号是否合法
//获取输入框
carNoNode = document.getElementById('carNum')
//获取输入框输入的内容
carNumber = carNoNode.value
//确定车牌号的正则表达式
reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[A-Z0-9]{5}$/
//正则对象.test(字符串) - 判断字符串和正则表达式是否匹配，匹配返回true，否则false
result = reObj.test(carNumber)
message = '车牌号不合法!'
//如果车牌号合法
if(result){
//获取今天的星期
date = new Date()
week = date.getDay()
//获取最后一个数字
var num = 0
for(i = carNumber.length-1;i>=0;i--){
ch = carNumber[i]
if(ch >= '0' && ch <= '9'){
num = ch
break
}
}
//判断今日是否限行
if(week == 6 || week == 7){
message = '今日不限行'
}else{
if(num == week || num == (week+5==10?0:week+5)){
message = '今日限行'
}else{
message = '今日不限行'
}
}
}
//将消息展示在网页上
messageNode = document.createElement('p')
messageNode.innerText = carNumber+message
//设置标签的class值
messageNode.className = 'result'
resultDivNode = document.getElementById('bottom')
resultDivNode.appendChild(messageNode)
}
//清除
function clearResult(){
resultDivNode.innerHTML = ''
}
</script>
</body>
</html>
属性操作
- 节点属性的增删改查
-
1）查
- a.节点.属性
- innerHTML - 标签内容(包含标签内容中的其他标签和文件)
- innerText - 标签中的文本内容
- href,src,text,value,id等，根据标签属性直接获取；注意：标签中的class属性在节点对应的是className
-
2)改
- a. 节点.属性 = 新值
- b.节点.setAttribute(属性名，新值)
//注意：inner相关的无效
BOM操作
-
BOM - 浏览器对象模型(browser object model)
- js提供了一个全局的对象window，指向的是浏览器
- js中声明的1所有的全局变量其实都是添加给Windows的属性
基本操作
- a.打开新的窗口：open() - 会返回被打开的窗口对应的对象
- open() - 空白窗口
- open(url) - 在新窗口打开指定网页
- open(url,'','width=300,height=200')
newwindow = window.open(网页链接)
- b.移动窗口
newwindow.moveTo(100,100)
- c.设置窗口大小
newwindow.resizeTo(500,600)
- d.浏览器的宽高
- inner是内容的宽度和高度
- outer浏览器的宽度和高度
- 弹框
- a.alert(提示信息) - 只有提示信息和确定按钮
- b.confirm(提示信息) - 提示框有确定和取消按钮；返回是布尔值，true->确定，false->取消
result = confirm('是否确定删除?')
console.log(result)
- c.prompt - 提示框，有一个输入框，一个确定按钮和取消按钮
- 返回值是字符串
result = prompt('提示信息','输入框中的默认值')
console.log(result)
计时事件
- 定时器
- a.开启定时器
- setInterval(函数，时间) - 每隔指定的时间调用一次指定的函数；返回的是定时器对象
- setTimeout(函数，时间) - 隔指定时间后调用一次词指定函数(函数只会调用一次)
- 函数 - 可以是函数名，也可以是匿名函数
- 时间 - 单位是毫秒
- b.停止定时
- clearInterval(定时器对象) - 停止指定的定时器
- clearTimeout(定时器对象) - 停止指定的定时器
//方案一：传函数
function timeAction(){
console.log('aaa')
}
timer1 = setInterval(timeAction,1000)
//方案二;匿名函数
timer2 = setInterval(function(){
console.log('bbb')
},1000)
练习：数字递增
num = 1
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
num++
pNode.innerText = num
},1000)
跳转百度
num = 5
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
pNode.innerText = num
num--
},1000)
if(num == 0){
clearInterval(timer3)
window.open('www.baidu.com')
}
</script>
广告轮播案例
每隔几秒变换一次广告图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<img id="img1" src="img/slide-1.jpg"/>
</div>
<script type="text/javascript">
//获取图片节点
imgNode = document.getElementById('img1')
imgArray = ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg']
//当前播放的图片的位置
index = 0
//每个3秒修改一次图片内容
setInterval(function(){
index++
if(index >= imgArray.length){
index = 0
}
imgNode.src = 'img/'+imgArray[index]
},3000)
</script>
</body>
</html>
时间绑定
js是时间驱动语言
-
时间三要素：事件源、事件、事件驱动程序
例如：- 小明打狗，狗咬他 -- 事件源：狗 事件：打狗 事件驱动程序：狗咬他
- 点击按钮，跳转其他页面 -- 事件源：按钮 事件：点击按钮 事件驱动程序：跳转其他页面
绑定事件
- a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
function buttonAction(){
console.log(this)
}
- b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数
- c.通过节点绑定事件 - 给节点的事件属性赋函数或者匿名函数
- 函数中this就是事件源(当前被点击的按钮)
btnNode2 = document.getElementById('btn2')
//给点击事件绑定函数
btnNode2.onclick = buttonAction
//给鼠标进入事件绑定函数
btnNode2.onmouseover = function(){
this.style.color = 'red'
}
- d. 通过节点绑定事件
- 节点.addEventListener(事件名，事件驱动程序)
- 事件名：去掉事件名前面的on，例如onclick -> click
- 这种方式绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
