11.30-12.7
- 字体图标
1.iconfont-阿里巴巴矢量图标库
选择自己想要的图标,添加到购物车,选择【添加至项目】
使用【在线链接】生成【Font Class】,也就是通过类样式来使用这些图标
得到这些图标的class样式数据:
粘贴样式数据到项目中去: 【注意要改成wxss!!!】
因为这些图标都是存在外网上的,所以并没有存在本地,所以不会站多大空间~
现在,想要让全局都能使用这些图标,还需要在app.wxss文件中引入这个iconFont.wxss文件
页面中使用图标的方法:
<text class="iconfont icon-Pdf" style="font-size: 80px;"></text>
所以,在class中粘贴对应图标的类名,就能在页面中看到对应的图标了
然后,有个很严重的问题:图标没有颜色
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont.css">
<style>
button .iconfont {
font-size: ;
color: ;
}
</style>
</head>
<body>
<i class="iconfont icon-xxx"></i>
<button><i class="iconfont icon-xxx"></i></button>
</body>
</html>
二.css样式的继承
1.会继承的属性:字体属性、文本属性、字体颜色等不影响布局的属性
不会继承的属性:宽高、内外边距等
特殊<a>
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">超链接</a></li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
color: red;
}
a{
color: pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#">超链接</a></li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
</ul>
</body>
</html>
三.过渡
transition-property——指定应用过渡属性的名称
transition-duration——指定过渡动画所需的时间(默认值为0s)transition-delay——在过渡效果开始作用之前需要等待的时transition-timing-function——规定过渡效果的速度曲线(linear——匀速)
(steps(x)——帧数越大变化越丝滑)
连写:transition:all 3s(与transition-duration时间相同)——所有属性过渡的效果
四.css3动画
1.@keyframes——规则是创建动画
2.animation-name——为 @keyframes 动画指定名称
3.animation-duration——定义动画完成一个周期需要多少时间
4.animation-timing-function——规定动画的速度曲线(默认值为ease)
5.animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
6.animation-delay——定义动画什么时候开始
7.animation-iteration-count——定义动画应该播放多少次(infinite——无数次)8.animation-direction——定义是否循环交替反向播放动画(alternate-reverse——允许反向)
9.transform: rotate(xdeg)——将元素围绕一个定点旋转而不变形的转换(deg——旋转度数,度数为正,则顺时针方向旋转,否则逆时针方向旋转)
10.连写:animation:动画名称 执行时间 播放次数
五.2d转换
transform:translateX(px)——沿着X轴移动元素
transform:translateY(px)——沿着Y轴移动元素
连写:transform:translate(x,y)
transform:rotateX(deg)——元素围绕横坐标旋转
transform:rotateY(deg)——元素围绕纵坐标旋转
连写:transform:translate(px) rotate(deg) 先移动后旋转
transform:scaleX()——缩放转换,改变元素的宽度
transform:scaleY()——缩放转换,改变元素的高度
transform:skewX(deg)——倾斜转换,沿着X轴
transform:skewY(deg)——倾斜转换,沿着Y轴
六.3d转换(多了z轴)
1.给父盒子加transform-style:preserve-3d; perspective:xpx——景深(视觉效果)
2.阴影
text-shadow:x轴的偏移量 y轴的偏移量 虚化的偏移量 颜色
box-shadow:x轴的偏移量 y轴的偏移量 虚化的偏移量 颜色
七.媒体查询(@media)
1.媒体查询可用于检查的事情
视口的宽度和高度
设备的宽度和高度
方向(平板电脑/手机处于横向还是纵向模式)
2.分辨率
all——用于所有媒体类型设备
print——用于打印机
screen——用于计算机屏幕、平板电脑、智能手机等
speech——用于大声“读出”页面的屏幕阅读器
3.渐变
注释:0deg 代表渐变方向为从下到上,90deg 代表渐变方向为从左到右.正角度属于顺时针方向,负角度sh属于逆时针方向
八.多列
column-count——描述元素的列数
column-gap——设置元素列之间的间隔大小
九.js的三种引入方式
1.行内引入
<button οnclick="alert('你完蛋了');alert('玩不了一点')">点击</button>
2.内嵌引入
<script>alert('666666')</script>
3.外链引入
script标签存在src属性之后,其内部就无法再写js代码
<script src="./02-index.js"></script>
十.对话框
<script>
// 警示框
alert("你完犊子了")
// 输入框
prompt("请输入用户名:")
// 控制台打印
console.log("我是在控制台显示的")
// 页面打印
document.write("我是即将显示在页面上的")
</script>
注释
1.//——单行注释2./* 开头, */ 结尾——多行注释
十一.变量
1.变量:代码运行时,存储数据的容器
2.var——变量声明 (var let——let 变量名)
3.let关键字生命的变量不能重复声明
4.var存在变量提升,let不存在变量提升
5.变量名的命名规范
变量名只能由有效符号组成(大小写的字母、数字、下划线、$)
不能以数字开头
不能使用关键字或者保留字
变量名最好有意义,不要使用a,b,c这类的单词
变量名尽量遵循小驼峰命名法 * userName user_name
类名采用大驼峰 * UserName
十二.常量
const声明的常量不能被更改
代码:<script>
const PI = 3.1415926
PI = 1.1111
alert(PI)
</script>
十三.数据类型——基本数据类型和引用数据类型
基本数据类型
数值类型
整数 int
小数、浮点数 float
布尔类型
只有两个值:true false
字符串
‘’ “” ``(es6)引起来的
未定义:undefined 引用未定义的变量
不是数字:NAN not a number
isNAN(10)====false
基本数据类型发生变化的值不能用const,数组可以(复杂数据类型存放在堆里,地址不修改)
十四.引用数据类型
数组(Array)
对象(object)
十五.数据类型转换
1.弱数据类型语言
Javascript python 弱数据类型语言 定义变量时不用表明数据类型
C java 定义变量时必须标明数据类型
2.自动数据类型转换
弱数据类型语言,数据的类型决定变量的类型,类型可以任意转换
- 强制类型转换
十六.常用运算符
1.算术运算符
+-*/%**
2.比较运算符
><>=<===!=
3.==表示等于,做判断
4.=表示赋值
===:
5.逻辑运算符
①与运算:并且关系 &&或 &(位运算符) :&&(建议使用 短路与) 第一个不成立立马停止判断,单个&会继续运算
②或运算:或者关系 || 或|
③非运算:不是,取反 !
- 复合赋值运算符
- 自加自减运算符
后加加和后减减的优先级小于赋值运算符,先赋值,后加减
前加加和前减减的优先级高于赋值运算符,先运算,后赋值
python把自加自减运算去除了
7.三元运算符
变量 = 表达式 ? 值 1: 值2;
8.移位运算符
计算机里只有加法运算
原码:
反码:
补码:
计算机底层使用的补码在进行运算
十七.数字补0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = prompt("请输入数字:")
num1 = num1 < 10 ? 0 + num1 : num1
alert(num1)
</script>
</body>
</html>
十八.转义字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button οnclick="alert()"></button>
<script>
"i\'am "
</script>
</body>
</html>
十九.分支结构
1.单分支
if (条件表达式) {
语句...
}
if语句执行时,会先对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则不执行
2.双分支
if (条件表达式) {
语句...
} else {
语句...
}
if...else语句执行时,会对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则执行else后的语句
3.多分支
if(条件表达式1){
语句1...
}else if(条件表达式2){
语句2...
}else if(条件表达式3){
语句3...
}else if(条件表达式4){
语句4...
}else {
语句5...
}
if...else if...else语句执行时,会自上至下依次对条件表达式进行求值判断,
如果判断结果为true,则执行当前if后的语句,执行完成后语句结束。
如果判断结果为false,则继续向下判断,直到找到为true的为止。
如果所有的条件表达式都是false,则执行else后的语句
4.switch多分支
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
switch...case...语句在执行时,会依次将case后的表达式的值和switch后的表达式的值进行全等比较,如果比较结果为false,则继续向下比较。
如果比较结果为true,则从当前case处开始向下执行代码。
如果所有的case判断结果都为false,则从default处开始执行代码。
二十.
1.for循环
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
2.while循环
while (条件) {
要执行的代码块
}
3.do…while循环
do {
要执行的代码块
}
4.while (条件);
break——跳出循环
continue——跳出本次循环,直接开始下一次循环
二十一.数组
1.数组下标:从0开始
2.通过数组下标: 数组名[下标]
3.通过数组下标重新对对应的数组元素进行赋值
二十二。数组的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 4, 5, "zhangsan"]
// console.log(arr.length) 返回数组中元素的个数
// for (let i = 0; i <= arr.length - 1; i++) {
// console.log(arr[i])
// }
// 循环加强 for in
// for (let i in arr) {
// console.log(arr[i])
// }
// for of
for (let i of arr) {
console.log(i)
}
</script>
</body>
</html>
二十三.数组的方法
pop() ——方法从数组中删除最后一个元素
pop() ——方法返回“被弹出”的值
push()—— 方法(在数组结尾处)向数组添加一个新的元素
push()—— 方法返回新数组的长度
shift() ——方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引
shift()—— 方法返回被“位移出”的字符串
unshift() ——方法(在开头)向数组添加新元素,并“反向位移”旧元素
unshift() ——方法返回新数组的长度
length ——属性提供了向数组追加新元素的简易方法
splice()——方法可用于向数组添加新项
splice()—— 方法返回一个包含已删除项的数组
concat()—— 方法通过合并(连接)现有数组来创建一个新数组
oncat()—— 方法不会更改现有数组。它总是返回一个新数组。
concat() ——方法可以使用任意数量的数组参数
concat()—— 方法也可以将值作为参数
slice() ——方法用数组的某个片段切出新数组
slice() ——方法创建新数组。它不会从源数组中删除任何元素
slice()——可接受两个参数,比如 (1, 3)
二十四.date
new date () 获取当前时间(包括年月日等等)
Date.getfullyear()获取当前年份
Date.getmonth()获取当前月份
Date。Getdate()获取当前日
Date.gethours ()获取当前时
Date.getminutes ()获取当前分
Date.getsecond()获取当前秒
Date。Getday()获取当前星期几
Date.Getmilliseconds()获取当前毫秒数
Date.gettime()获取时间戳
二十五.字符串对象
match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符
replace() 方法在字符串中用某些字符替换另一些字符
toUpperCase() / toLowerCase():字符串大小写转换使用函数
split()函数转为数组
-连接字符
Str3=Str1.concat(str2)
Str3.match(/\d/g)
//使用正则替换原来的内容
Sfr3.replace(/a/g,”(需要换东西)”)
-分割 split()
console.log(str3)
console.log(str3.split(""))
let str4 = str3.split("")
console.log(str4.join("##"))
-转大小写
console.log(str3.toUpperCase())
console.log(str3.toLowerCase())
-名字倒写
let str5 = "zhangsan"
let aaa = str5.split("")
console.log(aaa)
let bbb = aaa.reverse()
console.log(bbb)
console.log(bbb.join(""))
二十六.函数
1.函数:一段独立功能的代码的集合
function 函数名(参数){
代码
}
一个函数没有return的情况下,默认返回的是undefined
Arguments 用于承接用户发出数据
toCelsius()引用的是函数对象,toCelsius()引用的是函数结果
2.值传递:传递的是实际参数的一个副本。基本数据类型Undefined,Null,Boolean,Number、String都是值传递。
3.引用传递:传递的是实际参数的地址。引用数据类型Object,Array,Date, Function等都是引用传递。
4.作用域:全局作用域、函数作用域
二十七.
1.匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = function () {
console.log("666");
}
a()
</script>
</body>
</html>
2.箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// function fn(x) {
// return x + 5
// }
// let a = fn(4)
// console.log(a)
// let fn = () => alert("hello")
let fn = x => x + 5
console.log(fn(4))
let fn1 = (x, y) => {
let f = 6
return x + y + z
}
</script>
</body>
</html>
作业一传入参数乘积
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getSum() {
let sum = 1
for(let i in arguments){
sum *=arguments[i]
}
return sum
}
console.log(getSum(1,5,6,9))
</script>
</body>
</html>
作业二7的倍数和含7的数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for( a = 1;a<=100;a++){
if(a % 7 == 0 ||a % 10 == 7|| parseInt(a / 10) ==7){
console.log(a);
}
}
</script>
</body>
</html>
作业三兔子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function tz(n){
if(n <= 3) {
return 1;
}else{
return tz(n - 3) + tz(n - 1);
}
}
console.log(tz(20))
</script>
</body>
</html>