测验
今日考题
答案
1.列举你所知道的PEP8 Python编码规范
=左右有一个空格,给函数传参数不用加空格
+ - > < >= <+ != 左右有一个空格
普通函数之间,或者函数与其他代码之间有一个空行
对象与其他代码有两个空行
要有缩进
每行最多79个字符
2.求结果(易错题)
v1 = 1 or 3
v2 = 1 and 3
v3 = 0 and 2 and 1
v4 = 0 and 2 or 1
v5 = 0 and 2 or 1 or 4
v6 = 0 or Flase and 1
v1 = 1
v2 = 3
v3 = False
v4 = 1
v5 = 1
v6 = False
and || x and y || 布尔"与" - 如果 x 为 False,x and y 返回 False,否则它返回 y 的计算值。
or || x or y || 布尔"或" - 如果 x 是 True,它返回 x 的值,否则它返回 y 的计算值。
not || not x || 布尔"非" - 如果 x 为 True,返回 False 。如果 x 为 False,它返回 True。
优先级:not>and>or
and:前面为假(0 或者 False)则表达式为假,否则表达式为后面的值;
or:前面为真(非 0 或者非 False)则表达式为前面的值,否则表达式为后面的值;
3.简述字符编码发展史,以及你所知道的字符编码,每个字符编码表的在表示字符内部位数区别
ascii -> unicode -> utf-8 -> gbk
ascii 英文和符号 用一个字节标识 8位能标识256个字符
unicode 所有的字符用至少两个字符来标识,英文两个 中文四个
utf-8 ascii中的字符用一个字节标识,欧洲的字符用两个字节,东亚的字符(包括中文)用三个字节
gbk 国内版本 八位二进制来标识英文(一个字节), 两个字节标识中文
4.js代码书写位置有几种,什么是事件,js如何绑定事件
两种,放在head里面或者放在body里面,一般放在body最下面
事件就是满足条件,自动触发的一种机制
①
<button onclick='func1()'>第一种</button>
let function func1(){
alert(111)
}
②
<button id='d1'>第二种</button>
let btnEle = document.getElementById('D1')
btnEle.onclick = function(){
alert(222)
}
今日内容概要
- 原生JS事件
- 开关灯
- input焦点
- 实时展示时间
- 省市联动
原生js事件绑定
- 开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 { // 设置一个圆型
height: 100px;
width: 100px;
border-radius: 50%;
border: 3px red solid;
}
.be_red {
background-color: #e7ff5b;
}
.be_green {
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1" class="be_red be_green"> //优先展示最后一个class属性
</div>
<button id="d2">开灯</button>
<script>
let divEle = document.getElementById('d1');
let btnEle = document.getElementById('d2');
btnEle.onclick = function () { //绑定一个事件
divEle.classList.toggle('be_green') //有则删除,无则添加,实现开灯
}
</script>
</body>
</html>
- input框获取焦点失去焦点案例
.onfocus 获取焦点
.onblur 失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="孙尚香" id="d1">
<script>
let inpEle = document.getElementById('d1')
// 获取焦点
inpEle.onfocus = function () {
// 将input框内值去除
// .value是获取,加=是赋值
inpEle.value = ''
}
// 失去焦点
inpEle.onblur = function () {
// 给input框内重新赋值
inpEle.value = '刘备'
}
</script>
</body>
</html>
- 实时展示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
// 定义一个全局存储定时器的变量
t = null;
let inpEle = document.getElementById('d1');
let startEle = document.getElementById('d2');
let endEle = document.getElementById('d3');
// 1 访问页面之后,将访问的时间展示到input框中
// 2 动态展示时间
// 3 页面上加两个按钮,一个开始,一个结束
// 定义一个在input框中展示时间的函数
function showTime() {
let currentTime = new Date();
inpEle.value = currentTime.toLocaleString()
}
// 给start绑定展示,再绑定几秒钟执行一次
startEle.onclick = function () {
if(!t){
t = setInterval(showTime, 1000)
}
};
// 给end绑定清除定时器,并重置t
endEle.onclick = function () {
clearInterval(t);
t = null
}
</script>
</body>
</html>
- 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
// 先模拟省市数据
data = {
"河北": ["廊坊", "邯郸",'唐山'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'临沂市'],
'上海':['浦东新区','静安区','黄浦区'],
'深圳':['南山区','宝安区','福田区']
};
// 选for循环获取省
for(let key in data){
// 将省信息做成一个个option标签 添加到第一个select框中
// 1 创建option标签
let opEle = document.createElement('option')
// 2 设置文本
opEle.innerText = key
// 3 设置value
opEle.value = key // <option value="省">省</option>
// 4 将创建好的option标签添加到第一个select中
proEle.appendChild(opEle)
}
// 文本域变化事件 change事件
proEle.onchange = function () {
// 先获取到用户选择的省
let currentPro = proEle.value
// 获取对应的市信息
let currentCityList = data[currentPro]
// 清空市select中所有的option
cityEle.innerHTML = ''
// 自己加一个请选择
let ss = "<option disabled selected>请选择</option>"
// let oppEle = document.createElement('option')
// oppEle.innerText = '请选择'
// oppEle.setAttribute('selected','selected')
cityEle.innerHTML = ss
// for循环所有的市 渲染到第二个select中
for (let i=0;i<currentCityList.length;i++){
let currentCity = currentCityList[i]
// 1 创建option标签
let opEle = document.createElement('option')
// 2 设置文本
opEle.innerText = currentCity
// 3 设置value
opEle.value = currentCity // <option value="省">省</option>
// 4 将创建好的option标签添加到第一个select中
cityEle.appendChild(opEle)
}
}
</script>
</body>
</html>