JSD-2204-HTML-CSS-JavaScript-Day04

最新推荐文章于 2024-07-21 12:21:28 发布

程序猿 Monkey

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量309

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125547044

版权

1.css

1.1溢出设置overflow

visible超出部分显示(默认值)
hidden超出部分隐藏
scroll超出部分滚动显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border:1px solid red;
      /*hidden超出隐藏
      visible超出显示(默认)
      scroll超出滚动显示*/
      overflow: scroll;
    }
  </style>
</head>
<body>
<div>
  <img src="../b.jpg" alt="">
</div>
</body>
</html>

1.2行内元素垂直对齐方式vertical-align

top上对齐
middel中间对齐
bottom下对齐
baseline基线对齐

1.3显示层级 z-index

当元素层叠显示时,需要控制元素的显示层级
z-index的值越大显示越靠前.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{
      width: 50px;
      /*垂直对齐方式:
      baseline基线对齐
      top上对齐
      middle中间对齐
      bottom下对齐
      */
      vertical-align: bottom;
    }
    #d1{
      width: 50px;height: 100px;
      background-color: red;
      position: absolute;
      /*设置显示层级, 值越大显示越靠前*/
      z-index: 1;
    }
    #d2{width: 100px;height: 50px;
      background-color: green;
      position: absolute;
      z-index: 2;
    }
  </style>
    <!---->
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<input type="text"><img src="../b.jpg" alt="">
</body>
</html>

2.JavaScript

作用: 负责给页面添加动态效果.
语言特点:
属于脚本语言, 不需要编译直接由浏览器解析执行
基于面向对象
属于弱类型语言
安全性强: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据禁止访问
交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端电脑上的语言和用户近距离接触, Java语言每次交互都需要通过网络请求到服务器后再执行.

变量,数据类型,运算符,各种语句,方法,面向对象

2.1如何在html页面中添加JavaScript代码

三种引入方式:
内联: 在标签的事件属性中添加JS代码,当事件触发时执行.
事件: 系统给提供的一些特定的时间点
点击事件: 当点击元素时触发的时间点称为点击事件.
内部: 在html页面中的任意位置添加script标签,在标签体内写JS代码
外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>

<!--onclick点击事件属性   alert()弹出提示框-->
<input type="button" value="内联按钮" onclick="alert('按钮点击了')">

<script>
  //单行注释
  /*多行注释*/
  //在浏览器的控制台输出内容
  console.log("内部JS代码执行")
</script>
<!--引入外部的js文件,引入外部文件后 标签体内不能再写js代码-->
<script src="my.js"></script>
</body>

</html>

console.log("外部js代码执行")

2.2变量

JS属于弱类型语言
java强类型: int age = 18; String name="张三"; name=20;报错
JS弱类型: let age=18; let name="张三"; name=20; 不报错
JS中通过let或var关键字声明变量
let声明的变量作用域类似Java语言中的作用域

for(let i=0;i<10;i++){

let j=i+1;

}

let x = j+i; //不报错 但是访问不到j和i两个变量

var声明的变量作用域相当于是全局变量

for(var i=0;i<10;i++){

var j=i+1;

}

var x = j+i; //不报错,而且可以访问到j和i的值

2.3数据类型

JavaScript语言只有对象类型.
常见的对象类型:
string: 表示字符串, 可以通过单引号或双引号修饰 'abc' "abc"
number:相当于Java中所有数值类型的总和
boolean: 布尔值 true/false
undefined: 未定义 , 当变量只声明不赋值时,对象的类型为未定义类型
typeof 变量; 获取变量的类型

2.4运算符

算数运算符: + - * / %
除法运算会自动根据结果转换整数或小数
java: int x=5; int y=2; x/y = 2;
JS : let x=5; let y=2; x/y=2.5; x=6 x/y=3;
关系运算符: > < >= <= != ==和===
==和===区别: ==先统一两个变量的类型再比较值, ===先比较类型,如果类型相同之后再比较值

"666"==666 true "666"===666 false

逻辑运算符: && , ||, !
赋值运算符: = += -= *= /= %=
三目运算符: 条件?值1:值2

2.5各种语句

if else
while / do while
for
switch case

2.6方法

java: public 返回值类型方法名(参数列表){方法体}
JS: function 方法名(参数列表){方法体}
三种声明方法的方式:
function 方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}
let 方法名 = new Function("参数1","参数2","方法体");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="f1()">
<script>
  //无参无返回值方法
  function f1() {
    console.log("f1");
  }
  //调用方法
  f1();
  //有参无返回值
  function f2(name, age) {
    console.log(name+":"+age);
  }
  f2("张飞",18);
  //无参有返回值
  function f3() {
    return "这是返回值";
  }
  let info = f3();
  console.log(info);
  //有参有返回值
  function f4(x,y) {
    return x*y;
  }
  let result = f4(5,9);
  console.log(result);
  //第二种声明方法的方式
  let f5 = function (name,age) {
    console.log(name+":"+age);
  }
  //调用
  f5("诸葛亮",50);
  //第三种声明方法的方式
  let f6 = new Function("name","age","console.log(name+':'+age)")
  f6("程咬金",30);



</script>
</body>
</html>

2.7和页面相关的方法

通过选择器选择页面中的元素对象

let 元素对象 = document.querySelector("选择器");
获取或修改元素的文本内容 <标签名>文本内容</标签名>元素对象.innerText; //获取元素对象.innerText = "xxxx"; //修改
获取或修改控件的值元素对象.value; //获取元素对象.value = "xxxx"; //修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>这是div</div>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>
  function f() {
    //得到div
     let d = document.querySelector("div");
     //得到文本框
     let i = document.querySelector("input");
     //把文本框里面的内容取出赋值给div
     d.innerText = i.value;

  }
</script>
</body>
</html>

2.8NaN

Not a Number: 不是一个数字
isNaN(变量), 判断变量是否是NaN true代表是NaN false代表不是NaN

2.8.1平方练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="平方" onclick="f()">
<div></div>
<script>
  function f() {
    let i = document.querySelector("input");
    let d = document.querySelector("div");
    if (isNaN(i.value)){//判断如果输入的不是数字则进行提示
      d.innerText="输入错误!";
      return;//结束方法
    }
    //字符串进行-*/运算时会自动转成数值
    //  d.innerText = i.value*i.value;
    d.innerText = i.value*1+i.value*1;
  }
</script>
</body>
</html>

2.8.2计算器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div></div>
<script>
    function f(x) {
        let i1 = document.querySelector("#i1");
        let i2 = document.querySelector("#i2");
        let d = document.querySelector("div");
        if (isNaN(i1.value)||isNaN(i2.value)){
            d.innerText = "输入错误!";
            return;
        }
        switch (x) {
            case 1://加
                d.innerText = i1.value*1+i2.value*1;
                break;
            case 2://减
                d.innerText = i1.value-i2.value;
                break;
            case 3://乘
                d.innerText = i1.value*i2.value;
                break;
            case 4://除
                d.innerText = i1.value/i2.value;
                break;
        }

    }

  function f1() {
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    d.innerText = i1.value*1+i2.value*1;
  }
  function f2() {
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    d.innerText = i1.value-i2.value;
  }
  function f3() {
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    d.innerText = i1.value*i2.value;
  }
  function f4() {
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    d.innerText = i1.value/i2.value;
  }
</script>
</body>
</html>

2.8.3猜数字练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入1-100的数字">
<input type="button" value="猜一猜" onclick="f()">
<div></div>
<script>
  //得到1-100之间的随机整数
  let x = parseInt(Math.random()*100)+1;
  let count = 0;
  function f() {
    count++;
    let i = document.querySelector("input");
    let d = document.querySelector("div");
    if (i.value>x){
      d.innerText = "猜大了!";
    }else if(i.value<x){
      d.innerText = "猜小了!";
    }else{
      d.innerText = "恭喜你第"+count+"次猜对了!";
    }
  }

</script>
</body>
</html>

2.9JavaScript代码排错思路

如果页面没有运行出效果第一时间F12查看控制台的报错, 根据控制台提示的信息找到错误的位置

2.10JavaScript对象分类

内置对象: 包括number,string,boolean等
BOM: Browser Object Model, 浏览器对象模型, 包含和浏览器相关的内容
DOM:Document Object Model ,文档对象模型, 包含和页面相关内容

2.11BOM浏览器对象模型

window对象, 该对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
window中的常用方法:
isNaN() 判断变量是否是NaN
alert("xxxx") 弹出提示框
confirm("xxx") 弹出确认框
prompt("xxx") 弹出文本框
parseInt() 将字符串或小数转成整数
parseFloat() 将字符串转成整数或小数
let timer = setInterval(方法,时间间隔) 开启定时器
clearInterval(timer) 停止定时器
setTimeout(方法,时间间隔) 开启执行一次的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>0</h1>
<script>
  //开启只执行一次的定时器
  setTimeout(function () {
    console.log("时间到");
  },3000);

  let count=0;
  let h1 = document.querySelector("h1");
  //开启每秒执行一次的定时器
  let timer = setInterval(f,1000);
  function f() {
     count++;
     h1.innerText = count;
     if (count==5){
       //停止定时器
       clearInterval(timer);
     }
  }
</script>
</body>
</html>