js基础知识应用(1)

其他 2020-01-13 10:31:20 阅读次数: 0

JS小方块 随颜色变化宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
     #box{               
        width: 200px;
        height: 200px;
        background: black;
        margin: 0 auto;
    }
/* 上边为一的 下边为四的题 */
    #box1{
        font-size: 30px;
        width: 200px;
        text-align: center;
        margin: 0 auto;
    }
    .sss {
        color: orange;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id  = "box1" style="background:green" class="xxx"> 123</div>
    <script>
//一，做一个随着大小变化颜色的块
    //获取上边的块 ,以(div)这个名字代表它
    let div = document.getElementById("box");
    console.dir(div);//详细查询结果，看获取成功没有
    div.style.background='black';//给div绑定颜色
    div.style.width='200px';    //绑定宽高
    div.style.height='200px';
    //在上方给相应的元素绑定相应的事件，在下方相应的事件做你想做的事
    //鼠标事件
    div.onclick = function(){
        let color = div.style.background;
        //获取box元素的background样式 用color表示
        switch(color){
            case 'black': 
            div.style.background = 'orange';
            break;
        //进行比较 颜色一样进行输出orange，并break结束；否则循环一值继续
            case 'orange': 
            div.style.background = 'green';
            break;
            case 'green': 
            div.style.background = 'red';
            break;
            default:
            div.style.background = 'black'
            //default 如果上边条件不成立，就输出这个值
        }
        let width = div.style.width;
        //获取box元素的width样式 用width表示
        switch(width){
            case '200px':
            div.style.width = '150px';
            break;
            //进行比较，宽度一样输出150px，并break结束循环
            case '150px':
            div.style.width = '100px';
            break;
            case '100px':
            div.style.width = '160px';
            break;
            //这里不能设置一样的值，因为会导致直接跳到上面的值，下面的值无法用到，
            default: 
            div.style.width = '200px';
             //default 如果上边条件不成立，就输出这个值
        }
        let height = div.style.height;
        //获取box元素的height样式 用height表示
        switch(height){
                case '200px': 
                div.style.height = '150px';
                break;
                //进行比较，高度一样输出150px，并break结束循环
                case '150px': 
                div.style.height = '100px';
                break;
                case '100px' : 
                div.style.height= '160px';
                break;
               default: 
               div.style.height = '200px'
               //default 如果上边条件不成立，就输出这个值
            }
         }
         console.log(div);
    </script>
</body>
</html>

JS简单点击隐藏显示文字图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏显示文字图片</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    #box{
        width: 500px;
        margin: 0 auto;
        text-align: center;
        background: chartreuse;
    }
    #box p{
        font-size: 50px;
        color: orange;
        cursor: pointer; /* 鼠标变成小手 */
    }
    #box img{
        display: block;
        width: 500px;
    }
    #box .aabb{
        display: none;
    }  
    /* 用到这个class为隐藏 */
    </style>
</head>
<body>
    <!-- 一，隐藏显示图片文字 -->
    <div id="box">
        <p id="btn">隐藏</p>
        <img  id="people" src="404.jpg" alt="">
    </div>
    <script>
    let btn = document.getElementById('btn');
    let people = document .getElementById('people');
    console.dir(btn);
    console.dir(people);
    //获取上面的块，并命名显示
    btn.onclick=function(){
        let value = btn.innerText;//获取元素中的内容
        //如果获取的内容是隐藏，那就把它改为显示，反之给为隐藏
    if(value === '隐藏'){
        btn.innerText = '显示'
         // people.style.display='none'  
         //给元素增加class名 
        //people.className = 'aabb'
        people.style.display='none'  
    }else{
        btn.innerText = '隐藏'
        //people.className = ''
        people.style.display='block'
        //这俩个方法都可以实现
    }
    }
    
    </script>
</body>
</html>

JS 简单隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
    *{
        margin: 0；
        padding：0；
    }
    ul{
        list-style: none;
    }
    #box{
        width:500px;
        margin: 20px auto;
        text-align: center;
    }
    li{
        font-size: 20px;
        color: chartreuse;
        line-height: 30px;
        border: 1px solid blue;
     
    }
    </style>
    <!-- 设置基本样式 -->
</head>
<body>
    <div id ="box">
        <ul id ="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script>    
     let ul = document.getElementById('list')
     //获取上面的ul
     let list = ul.getElementsByTagName('li')
     //获取ul 里的 li,用数组表现出来
     let color = null;
     //新建一个变量，使它值为空，方便后面给它加函数，进行修改颜色
    console.log(list);
    //循环每一个li
    for(var i=0;i<list.length;i++){
        console.log(list[i])//输出每一个li
        if(i%2 === 0){
            //%取余
            //i条件成立对应为奇数行，因为i（i是偶数）从0开始 ,而li从1开始
            //把当前li的颜色改变
            list[i].style.background = 'black';
        }else{
            list[i].style.background = 'yellow';
            //如果上边的条件不成立i，那就是偶数行
            //把当前li的颜色改变
        }
         list[i].onmouseenter = function(){
            //this//当前你操作的元素是谁，this就是谁
            //在你划入元素之后，改变元素之前，先把人家原来的颜色保存下来，存到color变量里
            //让color把li自身颜色保存
            color = this.style.background;
            this.style.background = 'blue';
            //设置鼠标移入时所显示的颜色
        }
          list[i].onmouseout = function(){
               //当你划出这个元素时，再把人家之前的颜色赋值给人家
              this.style.background = color;
          }
    }
    //onmouseenter 鼠标移入   onmouseout  鼠标移出
    </script>
</body>
</html>

JS 简单选项卡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 530px;
            margin: 20px auto;
            border: 1px solid black;
        }
        #list {
            list-style: none;
            display: flex;
          
        }
        li {
            width:105px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: orange;
            cursor: pointer;
            /* 鼠标变成小手 */
            border-right: 1px solid black;
        }
        #box div {
            width: 531px;
            height: 300px;
            display: none;
          
        }
        #box div img{
            width:530px;
        }
        #box div.active{
            display: block;
        }
        li.active{
            border-bottom-color:white;
            background:#87CEEB;
        }
      /* 设置基本结构，给div设置隐藏,只有出发active这个class才可以显示 */
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li class="active">空之律者1</li>
            <li>空之律者2</li>
            <li>空之律者3</li>
            <li>空之律者4</li>
            <li>空之律者5</li>
        </ul>
        <div class="active">
            <img src="5.jpg" alt="">
        </div>
        <div>
            <img src="9.jpg" alt="">
        </div>
        <div>
            <img src="1.jpg" alt="">
        </div>
        <div>
            <img src="8.jpg" alt="">
        </div>
        <div>
            <img src="3.jpg" alt="">
        </div>
    </div>
    <script>
        //获取
        let box = document.getElementById('box');
        let nav = document.getElementById('list');
        let list = nav.getElementsByTagName('li');
        let div = box.getElementsByTagName('div');
        console.log(list,div);
        //先获取div和 ul,再依次获取其中的li和div
        //通过元素名获取元素,得到的是类数组
        //给相应的元素绑定相应的事件
        for(var i = 0;i<list.length;i++){
            list[i].aa = i;
            list[i].onclick = function(){
                //给每个组加鼠标事件
                console.log(this.aa);
                 fn(this.aa);
            }
        }
        //当用户点击事件的时候，for循环早已结束，此时i已经成为5,所以需要存储i的值，给它一个属性名
        function fn(index){
            console.dir()
            //吧三个li和三个div的class清除
            for(var i=0; i<list.length;i++){
                list[i].className= '';
                div[i].className= '';
            }
            //给点击的元素增加class名
                list[index].className= 'active';
                div[index].className= 'active';
        }
    
    </script>
</body>
</html>

JS 简单定时器 切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 600px;
            height: 300px;
            margin: 0 auto;
        }
        #time {
            width: 600px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            color: orange;
            background: rgba(0, 255, 179, 0.63);
            font-size: 50px;
            position: relative;
            display: none;
            transition: all 1s;
        }
        #box img {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="time">时间到</div>
        <div id="aa"><img src="1.jpg" alt=""></div>
    </div>
    <script>
        let box = document.getElementById('box')
        let aa = document.getElementById('aa')
        let img = aa.getElementsByTagName('img')
        let time = document.getElementById('time')
        console.log(box,aa,time);
        console.log(img[0].src)
        let flag = 1;
        function fn() {
            switch (img[0].src) {
                case '图片地址':
                    img[0].src = '图片地址';
                    break;
                case '图片地址':
                    img[0].src = '图片地址';
                    break;
                case '图片地址':
                    img[0].src = '图片地址';
                    break;
                case '图片地址':
                    img[0].src = '图片地址';
                    break;
                default:
                    img[0].src = '图片地址';
            }
            flag++;
            if(flag>20){
                clearInterval(int);
                img[0].src ="";
                time.style.display="block";
                //给flag进行判断，大于20，图片显示为空。time快进行显示
            }
        }
        let int = setInterval(fn, 500)
        //设置图片自动切换速度毫秒
        //一定写在函数外
    </script>
</body>
</html>
致我逝去的青春
发布了17 篇原创文章 · 获赞 23 · 访问量 377
私信 关注

猜你喜欢

转载自blog.csdn.net/wang_js_amateyr/article/details/103297915
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022