JavaScript 操作元素案例

最新推荐文章于 2022-12-21 20:08:12 发布

栀虞子

最新推荐文章于 2022-12-21 20:08:12 发布

阅读量522

点赞数

分类专栏： JavaScript学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_52476758/article/details/121880476

版权

JavaScript学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

操作元素案例

1. 点击按钮，显示当前时间

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        // element.innerText()
        var btn=document.querySelector("button");
        var div=document.querySelector("div");
        btn.onclick=function(){
            // div.innerText='2019-6-6';
            div.innerText=getTime();
        }

        function getTime(){
            // 1. 格式化日期    年月日时分秒
            var data=new Date();
            var year=data.getFullYear();
            var month=data.getMonth();
            var datas=data.getDate();
            var hour=data.getHours();
            var minutes=data.getMinutes();
            var seconds=data.getSeconds()
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=arr[data.getDay()];
            return '今天是: '+year+'-'+month+'-'+datas+'- '+hour+':'+minutes+':'+seconds+' '+day;    // 今天是2021年11月4日 星期六
        }
		// 元素可以不用添加事件
        var p=document.querySelector('p');
        p.innerText=getTime();	// 刷新即可显示时间
    </script>
</body>

2. 两个按钮，点击不同按钮出现不同图片

<body>
    <button id="zly">赵丽颖</button>
    <button id="ym">杨幂</button><br>
    <img src="images/赵丽颖.jpg" alt="">
    <script>
        var zly=document.getElementById('zly');
        var ym=document.getElementById('ym');
        var img=document.querySelector('img');
        ym.onclick=function(){
            img.src='images/杨幂.jpg';
        }
        zly.onclick=function(){
            img.src='images/赵丽颖.jpg';
        }
    </script>
</body>

3. 分时显示不同图片，显示不同问候语

<!-- 分时显示 不同图片，显示不同问候语 -->
     img{
            width:200px;
            height: 200px;
        }
     <img src="images/morning.jpg" alt="">
     <div>上午好</div> 
     <div></div>
    <script>
        // 1. 获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        // 得到小时数
        var date=new Date();
        var h=date.getHours();
        // 判断小时数，改变图片和文字信息
        if(h<12){
            img.src='images/morning.jpg';
            div.innerHTML='亲，上午好！';
        }else if(h<18){
            img.src='images/afternoon.jpg';
            div.innerHTML='亲，下午好！';
        }else{
            img.src='images/evening.jpg';
            div.innerHTML='亲，晚上好！';
        }
    </script>

4. 仿京东显示隐藏秘钥明文

<style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            width: 24px;
            position: absolute;
            top: 2px;
            right: 2px;
        }
</style>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye=document.getElementById('eye');
        var pwd=document.getElementById('pwd');
        // 2. 绑定事件
        var flag=0;
        eye.onclick=function(){
            if(flag==0){
                pwd.type='text';
                eye.src='images/open.png';
                flag=1;
            }else{
                pwd.type='password';
                eye.src='images/close.png';
                flag=0;
            }
        }
    </script>
</body>

5. 淘宝关闭二维码

		<style>
        .box{
           position: relative;
           width: 74px;
           height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }
        .close-btn{
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
<body>
    <div class="box">
        淘宝二维码
        <img src="images/ma.png" alt="" >
        <i class="close-btn">x</i>
    </div>
    <script>
        var btn=document.querySelector('.close-btn');
        var box=document.querySelector('.box');
        btn.onclick=function(){
            box.style.display='none';
        }
    </script>
</body>

6. 循环精灵图背景

<style>
    * {
    margin: 0;
    padding: 0;
	}

    .box {
        width: 300px;
        list-style: none;
        margin: 60px auto;
    }
    li {
        float: left;
        width: 35px;
        height: 35px;
        margin: 15px;
        background-color: pink;
        background: url(images/sprite.png) no-repeat;
    }
</style>
<body>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        // 1. 获取元素 所有的小li 
             var lis = document.querySelectorAll('li');
             for (var i = 0; i < lis.length; i++) {
                 // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
                 var index = i * 44;
                 lis[i].style.backgroundPosition = '0 -' + index + 'px';
             }
     </script>
</body>

7. 显示隐藏文本框内容

// 鼠标点击文本框时，里面的文字默认隐藏，鼠标离开文本框时，里面的文字显示
<style>
    /* 显示隐藏文本框内容 */
    input{
        color: #999;
    }
</style>
<body>
    <input type="text" value="手机">
    <script>
        var input=document.querySelector('input');
        input.onfocus=function(){
            if(this.value==='手机'){
                this.value='';
            }
            // 获得焦点需要把文本框里面文字的颜色变深
            this.style.color='#333';
        }
        input.onblur=function(){
            if(this.value===''){
                this.value='手机';
            }
            this.style.color='#999';
        }
    </script>
</body>

8. 密码框提示错误信息

// 用户如果离开密码框，里面输入的个数不是6~16，则提示错误信息，否则提示输入正确信息
<style>
    /* 密码框提示错误信息 图片为16png大小*/
    div{
        width: 600px;
        margin: 100px auto;
    }
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    .wrong{
        color: red;
        background-image: url(images/wrong.png);
    }
    .right{
        color: green;
        background-image: url(images/right.png);
    }
</style>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16为密码</p>
    </div>
    <script>
        var ipt=document.querySelector('.ipt');
        var message=document.querySelector('.message');
        ipt.onblur=function(){
            // 根据表单值的长度 ipt.value.length
            if(this.value.length<6 || this.value.length>16){
                message.className='message wrong';
                message.innerHTML='您输入的位数不对要求6~16位';
            }else{
                message.className='message right';
                message.innerHTML='您输入的正确';
            }
        }
    </script>
</body>

9. 百度换肤

*{
            margin: 0;
            padding: 0;
        }
        body{
            /* 页面铺满设置 */
            width: 100%;
            height: 100%;
            background: url(images/spring.jpg) no-repeat center top;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        li{
            list-style: none;
        }
        .baidu{
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li{
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img{
            width: 100px;
        }
</style>
<body>
    <!-- 百度换肤效果 -->
    <ul class="baidu">
        <li><img src="images/spring.jpg"></li>
        <li><img src="images/summer.jpg"></li>
        <li><img src="images/autumn.jpg"></li>
        <li><img src="images/winter.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素
        var imgs=document.querySelector('.baidu').querySelectorAll('img');
        // 2. 循环注册事件
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                document.body.style.backgroundImage='url('+this.src+')';
            }
        }
    </script>
</body>

10. 表格隔行变色

    <style>
        /* 表格隔行变色 */
        table{
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
    </style>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>广东理财30天债券B</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>270047</td>
                <td>广东理财30天债券B</td>
                <td>0.903</td>
                <td>3.386</td>
                <td>0.000</td>
                <td>0.000%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1. 获取元素 tbody所以的行
        var trs=document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环注册事件
        for(var i=0;i<trs.length;i++){
            // 3. 鼠标经过事件
            trs[i].onmouseover=function(){
                this.className='bg';
            }
            // 4. 鼠标离开事件
            trs[i].onmouseout=function(){
                this.className='';
            }
        }
    </script>
</body>

11. 表单全选取消全选案例

    <style>
        table{
            width: 300px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
            /* border-right:1px solid #F00;  右边框线
            border-left:1px solid #F00;     左边框线
            border-bottom:1px solid #F00;   底边框线
            border-top:1px solid #F00       上边框线  */
        }
        thead th{
            border-right: 1px solid #d7d7d7;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody td{
            /* 横线 竖线设置 */
            border-bottom: 1px solid #d7d7d7;  
            border-right: 1px solid #d7d7d7; 
            font-size: 12px;
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：让下面所有复选框的checkbox属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var j_cbAll=document.querySelector('.j_cbAll'); // 全选按钮
        var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');    // 下面所有复选框
        j_cbAll.onclick=function(){
            // this.checked;   // 可以得到当前复选框的选中状态，true-->选中，false-->没选中
            // console.log(this.checked);
            for(var i=0;i<j_tbs.length;i++){
                j_tbs[i].checked=this.checked;
            }
        }
        // 2. 下面复选框需要全部选中，上面全选才能选上
        for(var i=0;i<j_tbs.length;i++){
            j_tbs[i].onclick=function(){
                var flag=true; // 控制全选按钮是否选中
                // 每次点击下面的复选框都要检查4个小按钮是否全部选中
                for(var j=0;j<j_tbs.length;j++){    
                    if(!j_tbs[j].checked){
                        flag=false;
                        break;
                    }
                }
                j_cbAll.checked=flag;
            }
        }

    </script>
</body>

12. tab栏切换

	<style>
        /* tab栏切换 */
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        .item_info {
            padding: 20px 0 0 20px;
        }
        .item {
            display: none;
        }
    </style>
<body>
    <!-- tab栏切换 -->
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品介绍模块内容</div>
            <div class="item">规格与包装模块内容</div>
            <div class="item">售后保障模块内容</div>
            <div class="item">商品评价（50000）模块内容</div>
            <div class="item">手机社区模块内容</div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');  //找到上盒子
        var lis = tab_list.querySelectorAll('li');    //找到上盒子中的li
        var items = document.querySelectorAll('.item');    //找到所有的item
        for (var i = 0; i < lis.length; i++) {    //循环添加点击事件
            lis[i].setAttribute('index', i);      //为lis添加一个index的自定义属性，并从0开始
            lis[i].onclick = function () {
                //1.上面的模块选项卡，点击某一个，当前这一个底色为红色，其余的不变（排他思想）修改类的方式。
                for (var i = 0; i < lis.length; i++) {
                    //排他思想，干掉所有人，清除其他li的className属性
                    lis[i].className = '';
                }
                //保留我自己
                this.className = 'current';
                //2.下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件中。(排他思想)
                var index = this.getAttribute('index');      //获取index的属性值
                for (var i = 0; i < items.length; i++) {
                    //排他思想，干掉所有人，清除其他itiem的display属性
                    items[i].style.display = 'none';
                }
                //保留自己，让对应的item显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

案例涉及图片：
链接：https://pan.baidu.com/s/14uCeIAMzmJHy5TFFRNf2SA
提取码：1ctt

栀虞子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 操作元素案例

操作元素案例1. 点击按钮，显示当前时间<body> <button>显示当前系统时间</button> <div>某个时间</div> <script> // element.innerText() var btn=document.querySelector("button"); var div=document.querySelector("div");
复制链接

扫一扫