01-recode
<!--
推荐书 - 普林斯顿计算机公开课
为什么学习web前端?
web应用后端开发 ==> web前端
网络数据采集 ==> 爬虫
和前端开发人员交互
web前端 = HTML标签 + CSS + JavaScript
HTML标签 - 内容(content)
- 外部样式表
- 内部样式表 (首页最好写内部样式表)
- 内嵌样式表(不推荐)
CSS - 显示(display) 层叠样式表
<link href="style.css" rel="stylesheet">
<style>
*{}
h1{}
.foo{}
#bar{}
伪类选择器
</style>
优先级:
就近原则(后写的生效)
具体性原则(id > class > 标签选择器 > *(通配符))
重要性原则(样式后面加上 !important)
盒子模型 Box Modul
JavaScript - 行为(behavior)
Python / JavaScript -> 动态弱类型语言
都支持面向对象编程 / 函数式编程
Python 生态圈强大 - 数据分析 机器学习 爬虫 人工智能
JavaScript - 全栈开发语言 = ES(ECMAScript) + BOM + DOM
JS要后置，写在代码后面
ES - JavaScript的语法规范 - 5.1
BOM - Browser Object Model 浏览器对象模型
- window
DOM - Document Object Model 文档对象模型
-document
Android - Java / Kotlin
iOS - Objective-C / Swift
React Native - 跨平台 用的是JSX
Node.js - 写服务器
name = 'Luo Hao'
name = 100
var name = 'Luo Hao'
name = 100
-->
02-交互界面基础
<!-- CSS前置 写在前面
JS后置 写在后面
浏览器阵营
Chrome Firehox ie Opera Safar
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {font:72px arial;}
#bar {color: red;}
.foo {color: green !important;}
h1 {color: burlywood !important;}
#timer {
width: 300px;
height: 30px;
text-align: center;
line-height: 30px;
color: darkblue;
background-color: greenyellow;
/* float: right; */
position: absolute;
right: 20px;
top: 10px;
}
</style>
</head>
<body>
<!-- 创建一个显示时间的div -->
<div id="timer">
</div>
<h1 class="foo" id="bar">Hello, world!</h1>
<button onclick="shutDown()">关闭</button>
<button onclick="openBaidu()">打开百度</button>
<script>
//设置显示星期的显示方式
var weekDay = ["日", "一", "二", "三", "四", "五", "六"]; //星期
//创建一个时间函数
showTime = function(){
//得到时间日期,让时间每秒时间
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var second = date.getSeconds();
var week = date.getDay()
var timeStr = year + "年" + (month < 10 ? '0' : "") + month + "月" +
(day < 10 ? "0" : "") + day + "日" + " " + (hour < 10 ? "0" : "") + hour + ":" +
(minutes < 10 ? "0" : "") + minutes + ":" + (second < 10 ? "0" : "") + second +
" " + "星期" + weekDay[week];
var divTime = document.getElementById("timer") ; //返回值为id对应的标签
//divTime.textContent = timeStr; //修改标签的文本内容为传的字符串
divTime.innerHTML = timeStr; //修改标签的文本内容，并且会自动识别传入内容的代码
}
showTime() //先执行一遍时间,去掉网页显示时间的空白期
window.setInterval(showTime, 1000); //设置计时器，指定时间间隔,毫秒为单位,指定一个函数,每隔指定时间执行一遍函数
function shutDown(){
if (window.confirm("确定要关闭吗？")){
window.close();
}
}
function openBaidu(){
if(window.confirm("确定打开百度吗")){
window.open(url="https://www.baidu.com");
// window.open(url="https://www.baidu.com", "", "width=300px, height=300px");
}
}
/*
Python
不清楚循环次数 while
确定循环次数 for
JS
不确定循环次数 while
确定循环次数 for
至少执行一次的循环 do while
*/
// var isOk = true;
// window.alert(!isOk);
//
// var name = window.prompt("请输入用户名") <!-- 输入提示框 -->
// if (name !="null" && name.trim().length > 0){
// window.alert("你好" + name + "!");
// }else{
// window.alert("大家好");
// }
// 判断闰年
// var flag = true;
// while(flag)
// {
// var num = window.prompt("请输入年份: ");
// var year = parseInt(num);
// if (year==num && year>0)
// {
// if (year%400==0 || (year%4==0 && year%100 != 0))
// {
// window.alert("第" + num + "年" + "是闰年");
// }
// else
// {
// window.alert("第" + num + "年" + "不是闰年");
// }
// var flag = window.confirm("是否继续");
// if(!flag)
// {
// flag = false;
// }
// }
// else
// {
// window.alert("请输入有效年份");
// }
// }
</script>
</body>
</html>
判断成都车辆限行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成都机动车限行查询</title>
<style>
#search {
width: 640px;
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] {
width: 80px;
height: 36px;
font: 28px/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" placeholder="请输入车牌号">
<input type="button" value="查询" onclick="showResult()">
</div>
<hr>
<p id="result"></p>
<script>
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 = lastDigit(carNo);
if (digitStr) {
var digit = parseInt(digitStr);
var day = new Date().getDay();
if (digit % 5 == day || digit % 5 == day - 5) {
p.innerHTML += carNo + '今日限行<br>';
} else {
p.innerHTML += carNo + '今日不限行<br>';
}
} else {
p.innerHTML += carNo + '不是有效的车牌号<br>';
}
} else {
p.innerHTML += carNo + '不是有效的车牌号<br>';
}
input.value = '';
}
function lastDigit(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>
