HTML相关（四）

Miracle Bear

于 2022-08-31 16:32:47 发布

阅读量201

点赞数 2

分类专栏： HTML 文章标签： html java 前端

本文链接：https://blog.csdn.net/weixin_48100716/article/details/126623736

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

溢出设置

设置行内元素垂直对齐方式: top上对齐, middle中间对齐, bottom下对齐, baseline基线对齐，此处按钮下方与图片下方对齐

<head>
  <style>
    body>img{
      width: 100px;
        /* bottom下对齐*/
        vertical-align: bottom;
    }
  </style>
</head>
<body>
<input type="text"><img src="图片地址" alt="">
</body>

设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll，此处图片超出的部分可通过滑动显示条部分查看

<head>
  <style>
    body>div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /*设置超出的部分：滚动显示scroll*/
      overflow: scroll;
    }
  </style>
</head>
<body>
<div>
  <img src="图片地址" alt="">
</div>
</body>

z-index: 设置显示层级,值越大显示越靠前，int值

<head>0
  <style>
    #d1{
      width: 100px;
      height: 50px;
      background-color: red;
      position: absolute;
      /*设置显示层级,值越大显示越靠前*/
      z-index: 1;
    }
    #d2{
      width: 50px;
      height: 100px;
      background-color: blue;
      position: absolute;
      z-index: 2;
    }
  </style>
</head>
<body>
<div id="d1">这个显示在前边</div>
<div id="d2"></div>
</body>

js的引入方式

运行时，会在控制台输出：内部js代码执行成功，此行在控制台输出
-------my.js:1 外部js代码成功运行！

<!----内联：在标签的事件属性中添加js代码------>
<input type="button" value="按钮" onclick="alert('按钮被点击了')">
<script>
    //控制台输出
    console.log("内部js代码执行成功，此行在控制台输出");    
</script>
<!--引入外部js文件，script标签引入文件后不能写js代码-->
<script src="my.js"></script>
-------------------------------------------------------------
<!--js内容-->
console.log("外部js代码成功运行！")

方法的调用：

点击按钮后，控制台显示f1，其他的不点击按钮也会输出在控制台

<body>
<!---通过按钮调用方法--->
<input type="button" value="按钮" onclick="f1()">
<script>
    //1.无参无返回值的方法 
    function f1() {
        console.log("f1");
    }
    // 调用方法 
    f1();
    // 2.有参无返回值的方法
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("张三",50);
    
    //3.无参有返回值
    function f3() {
        return "这是返回值";
    }
    let info=f3();
    console.log(info);
    //4.有参有返回值
    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("李四",30);
    //第三种定义方法的方式
    let f6 =new Function("name","age","console.log(name+':'+age)")
    f6("王五",20);
    
</script>
</body>

页面相关的方法

点击按钮后，div中的值会变成text中的值

<div>原本的值</div>
<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>
    function f() {
        //得到div和文本框
        let d =document.querySelector("div");
        let i=document.querySelector("input");
        //把input的值取出赋给div
        d.innerText=i.value;
    }
</script>

悬停的动画效果

body>div>div:hover{
            /*当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于他原本的位置定位,无论是否进行移动,其所占的位置仍然留有空位*/
            position: relative;
            bottom: 5px;
            /*元素阴影：x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 5px 8px blue;
        }

填充：大概是当空格用的，暂时没想到用法

<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>这是一个没有左填充边距的文本。</p>
<p class="padding">这个文本的左填充边距为2厘米。</p>
<p class="padding2">这个文本的左填充边距为50%。</p>
</body>

定时器（方法名称，每隔多长时间）

<h1>0</h1>
<h2>0</h2>
<script>
    //开启定时器    
    setInterval(f,1000);
    let count = 0;
    let h1 =document.querySelector("h1");
    function f(){
        count++;
        h1.innerText = count;
    }
    //通过匿名方法开启定时器
    let timer = setInterval(function (){
        console.log(count);
        if(count==5){
            //停止计时器
            clearInterval(timer);
        }
    },100);
    //开启只执行一次的定时器
    setInterval(function () {
        let h2=document.querySelector("h2");
        h2.innerText ="时间到";
    },3000);      
</script>

在页面上添加东西，按下按钮后，会在页面上显示text中的内容以及显示一张图片

<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>
    function f() {
        //通过选择器得到文本框对象
        let i = document.querySelector("input");
        //创建h1
        let h1 = document.createElement("h1");
        //设置显示的内容为文本框的值
        h1.innerText = i.value;
        //把h1添加到body里面
        document.body.append(h1);
        //创建图片标签
        let img = document.createElement("img");
        img.src = "图片地址";
        document.body.append(img);
    }
</script>

添加图片显示的代码

<input type="text" placeholder="请输入添加图片的数量" id="i1">
<input type="button" value="猫猫" onclick="f(1)">
<input type="button" value="随机来点" onclick="f(2)">
<script>
    function f(x) {
        let imgName = x==1?"猫猫的图片地址":"随便来点的图片地址";
        //得到文本框
        let i1 =document.querySelector("#i1");
        for (let i =0;i<i1.value;i++){
            //创建图片标签
            let img =document.createElement("img");
            img.src = imgName;
            img.width = 100; //设置宽度
            //添加到body；里面
            document.body.append(img);  
        }
    }
</script>

列表的创建

<input type="text" placeholder="员工姓名" id="i1">
<input type="text" placeholder="员工工资" id="i2">
<input type="text" placeholder="员工工作" id="i3">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
    </tr>
</table>
<script>
    function f() {
        //1.创建tr 
        let tr=document.createElement("tr");
        // 2.创建3个td 
        let nameTd=document.createElement("td");
        let salaryTd=document.createElement("td");
        let jobTd=document.createElement("td");
        // 3.把三个文本框的值给到三个td 
        //完整代码
        // let i1 =document.querySelector("#i1");
        // let i2 =document.querySelector("#i2");
        // let i3 =document.querySelector("#i3");
        nameTd.innerText=i1.value;
        salaryTd.innerText=i2.value;
        jobTd.innerText=i3.value;
        // 4.把td装进tr 
        tr.append(nameTd,salaryTd,jobTd);
        // 5.得到table 把tr装进table
        let table = document.querySelector("table");
        table.append(tr);
    }
</script>

自定义对象，运行后在控制台输出p1,p2的数据

<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品销量</th>
    </tr>
</table>
<script>
    //实例化对象  空对象
    let p1 = {};
    //动态给实例化完成的对象添加属性和方法
    p1.name = "张三";
    p1.age = 20;
    p1.run = function () {
        console.log(this.name+":"+this.age);
    }
    //调用对象的方法
    p1.run();
    //实例化自带属性和方法的对象
    let p2 = {
        name:"李四",
        age:18,
        run:function () {
            console.log(this.name+":"+this.age);
        }
    }
    p2.run();
    //通过数组装对象的方式封装 列表数据
    let arr = [{title:"商品1",price:4000,saleCount:200},
        {title:"商品2",price:500,saleCount:1200},
        {title:"商品3",price:5,saleCount:300}];
    //遍历数组 把数据展示到页面中
    for (let product of arr) {
        //创建行
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let saleCountTd = document.createElement("td");
        titleTd.innerText = product.title;
        priceTd.innerText = product.price;
        saleCountTd.innerText = product.saleCount;
        //把3个td装进tr
        tr.append(titleTd,priceTd,saleCountTd);
        //把tr装进table
        let table = document.querySelector("table");
        table.append(tr);
    }
</script>

Miracle Bear

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML相关（四）

------my.js:1 外部js代码成功运行！设置行内元素垂直对齐方式: top上对齐, middle中间对齐, bottom下对齐, baseline基线对齐，此处按钮下方与图片下方对齐。设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll，此处图片超出的部分可通过滑动显示条部分查看。运行时，会在控制台输出：内部js代码执行成功，此行在控制台输出。z-index: 设置显示层级,值越大显示越靠前，int值。......
复制链接

扫一扫