一、JavaScript组成结构
1.JavaScript
web前端 = HTML + CSS + JavaScript
JavaScript = ECMAScript + BOM + DOM
ES --> JavaScript
BOM --> Browser Object Model
DOM --> Document Object Model
2.选择器优先级
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web1807</title>
<style type="text/css">
h1{
font:72px arial;
}
#bar{
color:red;
}
.foo{
color:green;
}
/*!important --> 重要性原则，优先级最高*/
h1{
color:blue !important;
}
</style>
</head>
<body>
<h1 id="bar" class="foo">Hello,world!</h1>
</body>
</html>
测试结果
1.PNG
2.百度按钮
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web1807</title>
</head>
<body>
<button onclick="shutdown()">关闭</button>
<button onclick="OpenBaidu()">打开百度</button>
<script type="text/javascript">
function shutdown(){
if (window.confirm('确定要退出吗？')){
//close() -> 关闭窗口
window.close();
}
}
function OpenBaidu(){
//open -> 打开窗口
window.open('https://www.baidu.com','','width=300,height=200');
}
</script>
</body>
</html>
测试结果
2.PNG
3.显示当前时间
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web1807</title>
<style type="text/css">
#timer{
width: 260px;
height: 30px;
text-align: center;
color: yellow;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="timer"></div>
<script type="text/javascript">
var weekdays = ['日','一','二','三','四','五','六']
function showTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours()
var minute = now.getMinutes();
var second = now.getSeconds();
var day = now.getDay();
//python中的三元运算：self.hp = hp if hp > 0 else 0
var timeStr = year + '年' + (month < 10 ? '0' : '') + month + '月' + (date < 10 ? '0' : '') + date + '日 ' + (hour < 10 ? '0' : '') + hour + ':' + (minute < 10 ? '0' : '') + minute + ':' + (second < 10 ? '0' : '') + second + ' 星期<b>' + weekdays[day] + '</b>' ;
var div = document.getElementById('timer');
//添加文本内容：div.textContent = timeStr;
div.innerHTML = timeStr;
}
showTime();
window.setInterval(showTime,1000)
/*
var isOK = true
window.alert(isOK)
window.alert(!isOK)
var name = window.prompt('请输入用户名：')
if (name!='null' && name.trim().length > 0){
window.alert('你好，' + name + '!')
}else{
window.alert('大家好！')
}
while循环 /do-while循环 /for循环
while循环 -> 不确定循环的次数
for循环 -> 循环的次数是确定的
do-while -> 至少执行一次
var flag = true;
do{
var yearStr = window.prompt('请输入年份：');
// parseInt() -> 将字符串解析为整数
var year = parseInt(yearStr);
if (year == yearStr && year > 0){
if (year%4 == 0 && year %100 != 0 || year%400 == 0)
{
window.alert(year + '年是闰年');
}else{
window.alert(year + '年不是闰年');
}
flag = window.confirm('是否继续？');
}else{
window.alert('请输入有效的年份！');
}
}while(flag);*/
</script>
</body>
</html>
测试结果
3.PNG
二、机动车限行查询
1.机动车限行查询
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成都机动车限行查询</title>
<style type="text/css">
#search{
width: 740px;
margin: 0 auto;
text-align: center;
margin-top: 150px;
}
#carno{
display: inline-block;
width: 520px;
height: 36px;
font: 36px/36px arial;
text-align: center;
vertical-align: middle;
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
/*#search input[type=button] -> 属性选择器*/
#button1{
width: 80px;
height: 36px;
font:20px/36px arial;
border: none;
color: white;
background-color: green;
vertical-align: middle;
}
#button2{
width: 130px;
height: 36px;
font:20px/36px arial;
border: none;
color: white;
background-color: red;
vertical-align: middle;
}
#result{
width: 640px;
margin: 0 auto;
text-align: center;
font: 32px/36px arial;
}
</style>
</head>
<body>
<div id='search'>
<input type="text" id="carno" value="" placeholder="请输入车牌号"/>
<input type="button" id='button1' value="查询" onclick="showResult()"/>
<input type="button" id='button2' value="清空历史记录" onclick="clearContent()"/>
</div>
<hr>
<p id="result"></p>
<script type="text/javascript">
function showResult(){
var input = document.getElementById('carno');
var p = document.getElementById('result');
var carNo = input.value;
var regex = /^[川渝云贵京津沪][A-Z]\s*[0-9A-Z]{5}$/;
if (regex.test(carNo)){
var digitStr = lastDigt(carNo);
if(digitStr){
var digit = parseInt(digitStr);
var day = new Date().getDay();
if(digit % 5 == day || digit % 5 == day-5){
p.innerHTML = carNo + '今日限行<br>' + p.innerHTML;
}else{
p.innerHTML = carNo + '今日不限行<br>' + p.innerHTML;
}
}else{
p.innerHTML = carNo + '不是有效的车牌号<br>' + p.innerHTML;
}
}else{
p.innerHTML = carNo + '不是有效的车牌号<br>' + p.innerHTML;
}
input.value = '';
}
function clearContent(){
var p = document.getElementById('result');
p.textContent = '';
}
function lastDigt(str){
for (var index = str.length-1; index >= 0; index -= 1){
var digitStr = str[index];
if(digitStr >= '0' && digitStr <= '9'){
return digitStr;
}
}
return null;
}
</script>
</body>
</html>
测试结果
4.PNG
网友评论