会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132987个问题

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 4428楼
Python 全系列/第二阶段:Python 深入与提高/模块 4429楼
Python 全系列/第九阶段:Flask百战电商后台系统/Flask百战电商后台项目 4430楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:30px;
            height:15px;
            border: 1px solid black;
            line-height: 15px;
            align:center;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="0"/>  <!--value是当前值-->
<div></div>
<script>
    var div=document.querySelector("div");
    var input=document.querySelector("input");
    var flag=false;
    input.onmousemove=function(){
        div.innerHTML=input.value;
        if(flag) {
            //console.log("(x,y)的值为(" + event.clientX + "," + event.clientY + ")");

            if (event.clientX > 134) {event.clientX = 134;}
            if (event.clientX < 14) {event.clientX = 14;}
            div.style.left = event.clientX + 'px';//style对象的属性值都是字符串,单位包括在字符串中。所以这里用连接符,连接一个字符,使其变成字符串。
            div.style.display = 'block';
        }
    }
    input.onmousedown=function(){//鼠标按下时触发
        flag=true;
        div.style.display='none';
    }
    input.onmouseup=function(){//鼠标抬起时触发
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

我这个绝对定位,距离左边距离的这个功能不能实现。div到第一个位置停止了,但我的程序出来效果图div还可以继续移动

blob.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 4431楼
JAVA 全系列/第二十九阶段:数据结构和算法BATJ大厂面试重难点/绪论 4432楼
Python 全系列/第二阶段:Python 深入与提高/文件处理 4433楼
JAVA 全系列/第十二阶段:Spring Cloud Alibaba技术栈/Dubbo 4434楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:完成CMS系统 4435楼

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 10px;
        }
        
        table tr td {
            width: 100px;
            height: 40px;
        }
    </style>
<body>
    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> -->
    <table border="1" align="center" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
<script>
        //将表格中所有偶数的行背景颜色设置为 lightgreen
        $('tr:odd').css('background-color', 'lightgreen');

        var color = '';

        // 当鼠标移到tr上时
        $('tr').hover(function() {
            //鼠标移入
            // 设置背景属性
            color = $(this).css('background-color');

            // 设置背景属性值
            $(this).css('background-color', 'lightgray');
        }, function() {
            //鼠标移出
            // 设置背景属性值
            $(this).css('background-color', color);
            color = '';
        });
    </script>


老师,这个案例中的 

var color = '';

的作用是不是可以理解为用来记忆(存储)background-color的相关属性值呀。对这里设置 var color='' 理解得不是很透彻感觉。









WEB前端全系列/第三阶段:jQuery编程模块/jQuery基础知识(旧) 4436楼
Python 全系列/第八阶段:Vue框架/vue框架 4437楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 4438楼
JAVA 全系列/第十三阶段:高性能数据处理、NoSQL、分库分表/Redis 4440楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637