web11.30-12.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>
    <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样式的继承

会继承的属性:字体属性、文本属性、字体颜色等不影响布局的属性

不会继承的属性:宽高、内外边距等

特殊<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动画

@keyframes——规则是创建动画

animation-name——为 @keyframes 动画指定名称

animation-duration——定义动画完成一个周期需要多少时间

animation-timing-function——规定动画的速度曲线(默认值为ease)

animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式

animation-delay——定义动画什么时候开始

animation-iteration-count——定义动画应该播放多少次(infinite——无数次)

animation-direction——定义是否循环交替反向播放动画(alternate-reverse——允许反向)

transform: rotate(xdeg)——将元素围绕一个定点旋转而不变形的转换(deg——旋转度数,度数为正,则顺时针方向旋转,否则逆时针方向旋转)

连写:animation:动画名称 执行时间 播放次数

<!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>
        div {
            width: 300px;
            height: 50px;
            background-color: pink;
            animation: myMove 3s infinite alternate;

        }

        @keyframes myMove {
            0% {
                width: 300px;
                height: 50px;
                background-color: pink;
                transform: rotate(45deg);
            }

            25% {
                width: 400px;
                height: 70px;
                background-color: green;
                transform: rotate(145deg);

            }

            50% {
                width: 600px;
                height: 80px;
                background-color: greenyellow;
                transform: rotate(245deg);

            }

            100% {
                width: 1200px;
                height: 300px;
                background-color: red;
                transform: rotate(345deg);

            }

        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

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轴)

给父盒子加transform-style:preserve-3d;

                  perspective:xpx——景深(视觉效果)

阴影

text-shadow:x轴的偏移量 y轴的偏移量 虚化的偏移量 颜色

box-shadow:x轴的偏移量 y轴的偏移量 虚化的偏移量 颜色


<!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>
        p {
            text-shadow: 2px 2px 2px rgb(243, 8, 47);
        }

        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            box-shadow: 2px 2px 8px pink;
        }
    </style>
</head>

<body>
    <p>一段文字</p>
    <div></div>
</body>

</html>

媒体查询(@media)

媒体查询可用于检查的事情

  •  视口的宽度和高度
  •  设备的宽度和高度
  •  方向(平板电脑/手机处于横向还是纵向模式)
  • 分辨率

all——用于所有媒体类型设备

print——用于打印机

screen——用于计算机屏幕、平板电脑、智能手机等

speech——用于大声“读出”页面的屏幕阅读器

渐变

.simple-linear {
  background: linear-gradient(blue, pink);
}

  

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

  

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

  

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

0deg 代表渐变方向为从下到上,90deg 代表渐变方向为从左到右.正角度属于顺时针方向,负角度sh属于逆时针方向

多列

column-count——描述元素的列数

column-gap——设置元素列之间的间隔大小

js的三种引入方式

行内引入

<button onclick="alert('你完蛋了');alert('玩不了一点')">点击</button>

内嵌引入

<script>alert('666666')</script>

外链引入

script标签存在src属性之后,其内部就无法再写js代码

<script src="./02-index.js"></script>

对话框

 <script>
        // 警示框
        alert("你完犊子了")
        // 输入框
        prompt("请输入用户名:")

        // 控制台打印
        console.log("我是在控制台显示的")

        // 页面打印
        document.write("我是即将显示在页面上的")
 </script>

注释

//——单行注释

 /* 开头, */ 结尾——多行注释

变量

变量:代码运行时,存储数据的容器

var——变量声明  (var let——let 变量名)

let关键字生命的变量不能重复声明

var存在变量提升,let不存在变量提升

变量名的命名规范

  • 变量名只能由有效符号组成(大小写的字母、数字、下划线、$)
  • 不能以数字开头
  • 不能使用关键字或者保留字
  • 变量名最好有意义,不要使用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)

数据类型转换

弱数据类型语言

Javascript    python   弱数据类型语言     定义变量时不用表明数据类型

C    java   定义变量时必须标明数据类型

自动数据类型转换

弱数据类型语言,数据的类型决定变量的类型,类型可以任意转换

强制类型转换

常用运算符

算术运算符

+

-

*

/

%

**

比较运算符

>

<

>=

<=

==

!=

==表示等于,做判断

=表示赋值

 ===:

逻辑运算符

与运算:并且关系  &&或 &(位运算符)  :&&(建议使用  短路与) 第一个不成立立马停止判断,单个&会继续运算

或运算:或者关系      ||   或|   

非运算:不是,取反    !

复合赋值运算符

​
 <script>
        // =
        let a = 11
        // a = 22

        a += 1  // a = a + 1
        console.log(a)  //12

        a -= 3  //a = a - 3
        console.log(a)  //9

        a *= 2  //a = a * 2
        console.log(a)

        a /= 2
        console.log(a)

</script>

​

自加自减运算符

后加加和后减减的优先级小于赋值运算符,先赋值,后加减

前加加和前减减的优先级高于赋值运算符,先运算,后赋值

python把自加自减运算去除了

三元运算符

变量 = 表达式 ? 值 1: 值2;

移位运算符

计算机里只有加法运算

原码:符号位加上真数的绝对值

反码:正数的反码是其本身,负数的反码是在其原码的基础上,符号位不变,其余各个位取反

补码:正数的补码就是其本身,负数的补码是在其原码的基础上,符号位不变,其余各位取反,               最后+1(即在反码的基础上+1)

计算机底层使用的补码在进行运算

数字补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 onclick="alert()"></button>
    <script>
        "i\'am "
    </script>
</body>

</html>

分支结构

单分支

 if (条件表达式) {

              语句... 

        }

if语句执行时,会先对条件表达式进行求值判断,

如果值为true,则执行if后的语句

如果值为false,则不执行

双分支

if (条件表达式) {

                 语句...

          } else {

                   语句...

          }

if...else语句执行时,会对条件表达式进行求值判断,

如果值为true,则执行if后的语句

如果值为false,则执行else后的语句

多分支

   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后的语句

switch多分支

switch(条件表达式){

        case 表达式:

                语句...

        break;

        case 表达式:

                语句...

        break;

        case 表达式:

                语句...

         break;

         default:

                语句...

         break;

}
switch...case...语句在执行时,会依次将case后的表达式的值和switch后的表达式的值进行全等比较,如果比较结果为false,则继续向下比较。

如果比较结果为true,则从当前case处开始向下执行代码。

如果所有的case判断结果都为false,则从default处开始执行代码。

for循环

for (语句 1; 语句 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>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: pink;
            border-radius: 10px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <script>
        // 九九乘法表

        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j}*${i}=${j * i}</span>`)
            }
            document.write(`<br>`)
        }
    </script>
</body>

</html>

while循环

while (条件) {
    要执行的代码块
}

do…while循环

do {
    要执行的代码块
}

while (条件);

break——跳出循环

continue——跳出本次循环,直接开始下一次循环

数组

数组下标:从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 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)

math

<!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>
        console.log(Math.E)
        console.log(Math.PI)
        console.log(Math.SQRT2)

        let a = -3.14
        console.log(Math.ceil(a))
        console.log(Math.floor(a))

        console.log(Math.abs(a))

        console.log(Math.max(1, 2, 12, 33, 21))
        console.log(Math.min(1, 2, 12, 33, 21))

        console.log(Math.random())

        // 四舍五入
        console.log(Math.round(3.54))


        // 开平方根
        console.log(Math.sqrt(9))

        // 幂次方
        console.log(Math.pow(2, 3))

    </script>
</body>

</html>

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(""))

函数

函数:一段独立功能的代码的集合

function 函数名(参数){

代码

}

一个函数没有return的情况下,默认返回的是undefined

Arguments 用于承接用户发出数据

toCelsius()引用的是函数对象,toCelsius()引用的是函数结果

值传递:传递的是实际参数的一个副本。基本数据类型Undefined,Null,Boolean,Number、String都是值传递。

引用传递:传递的是实际参数的地址。引用数据类型Object,Array,Date, Function等都是引用传递。

作用域:全局作用域、函数作用域

argument

<!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() {
            // return a + b
            // console.log(arguments)
            let sum = 0
            for (let i in arguments) {
                sum += arguments[i]

            }
            return sum

        }
        console.log(getSum(1, 2, 3, 4))

    </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>
        let a = function () {
            console.log("666");
        }
        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 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>
  • 45
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值