会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132837个问题
Python 全系列/第一阶段:Python入门/序列 6797楼
Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 6798楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 6799楼

# 出现问题的代码

# encoding:utf-8
"""
新增功能:
      完善子弹类


"""
import pygame,time,random
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 450
BG_COLOR = pygame.Color(0,0,0)
TEXT_COLOR = pygame.Color(255,0,0)
class MainGame():
    window = None
    my_tank = None
    # 存储敌方坦克的列表
    Enemylist =[]
    # 定义敌方坦克的数量
    EnemyCount = 10
    # 存储我方子弹的列表
    myBulletlist=[]
    def __init__(self):
        pass
    # 开始游戏
    def startGame(self):
        # 加载主窗口
        # 初始化窗口
        pygame.display.init()
        # 初始化我方坦克(建立我方坦克的实例对象)
        MainGame.my_tank=Tank(350,360)
        # 初始化敌方坦克(建立敌方方坦克的实例对象)
        self.createEmenyTank()
        # 设置窗口的大小及显示
        MainGame.window=pygame.display.set_mode([SCREEN_WIDTH,SCREEN_HEIGHT])
        # 设置窗口标题
        pygame.display.set_caption("坦克大战1.00")
        while True:
            # 设置循环时间
            time.sleep(0.05)
            # 设置背景颜色
            MainGame.window.fill(BG_COLOR)
            # 绘制文字
            MainGame.window.blit(self.getTextSurface("敌方坦克的所有数量%d"%len(MainGame.Enemylist)),(10,10))
            # 展示我方坦克
            MainGame.my_tank.displayTank()
            # 展示敌方坦克
            self.blitEnemyTank()
            # 展示我方子弹
            self.blitMyBullet()
            # 我方坦克可以移动的信号开关
            if not MainGame.my_tank.stop:
                MainGame.my_tank.move()
            # 通过事件来控制游戏(关闭,移动)
            self.getEvent()
            # 更新屏幕
            pygame.display.update()
    # 初始化敌方坦克(建立敌方方坦克的实例对象)
    def createEmenyTank(self):
        top=100
        # 循环生成坦克
        for i in range(MainGame.EnemyCount):
            left = random.randint(0,600)
            speed = random.randint(1,4)
            enemy=EnemyTank(left,top,speed)
            MainGame.Enemylist.append(enemy)
    # 展示敌方坦克
    def blitEnemyTank(self):
        # 遍历敌方坦克列表
        for enemy in MainGame.Enemylist:
            enemy.displayTank()
            enemy.randMove()
    # 展示我方子弹
    def blitMyBullet(self):
        for myBullet in MainGame.myBulletlist:
            myBullet.displayBullet()


    # 结束游戏
    def endGame(self):
        print("爽不爽,再来一局?")
        exit()
    # 左上角添加文字
    def getTextSurface(self,text):
        # 初始化文字
        pygame.font.init()
        # 查看所有字体
        #print(pygame.font.get_fonts())
        # 创建文字对象
        font=pygame.font.SysFont("fangsong",18)
        # 绘制文字信息
        textSurface=font.render(text,True,TEXT_COLOR)
        return textSurface
    # 获取事件
    def getEvent(self):
        # 获取所有事件
        eventlist=pygame.event.get()
        # 遍历事件列表
        for event in eventlist:
            # 判断按下的键是是关闭还是键盘按下
            # 如果按下的退出,关闭游戏
            if event.type == pygame.QUIT:
                self.endGame()
            # 如果是键盘的按下
            if event.type == pygame.KEYDOWN:
                # 判断按下的是上,下,左,右
                if event.key == pygame.K_LEFT:
                    # 切换方向
                    MainGame.my_tank.direction="L"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_RIGHT:
                    # 切换方向
                    MainGame.my_tank.direction="R"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_UP:
                    # 切换方向
                    MainGame.my_tank.direction="U"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_DOWN:
                    # 切换方向
                    MainGame.my_tank.direction ="D"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_SPACE:
                    myBullet=Bullet(MainGame.my_tank)
                    MainGame.myBulletlist.append(myBullet)
                    print("发射子弹")

class Tank():
    # 增加坦克位置属性,距离左边left,距离上边top
    def __init__(self,left,top):
        # 保存下载的坦克图片
        self.images={"U":pygame.image.load("img/p1tankU.gif"),
                     "D":pygame.image.load("img/p1tankD.gif"),
                     "L":pygame.image.load("img/p1tankL.gif"),
                     "R":pygame.image.load("img/p1tankR.gif"),
                     }
        # 方向
        self.direction="U"
        # 根据方向选择图片
        self.image=self.images[self.direction]
        # 根据图片获取区域
        self.rect=self.image.get_rect()
        # 设置图片的left,top
        self.rect.left=left
        self.rect.top=top
        # 速度 根据速度快慢实现移动
        self.speed=10
        # 设置移动开关
        self.stop = True
    # 移动
    def move(self):
        # 根据方向和移动两属性推算移动距离
        # 判断确定方向
        if self.direction=="L":
            if self.rect.left>0:
                self.rect.left -=self.speed
        elif self.direction=="U":
            if self.rect.top>0:
                self.rect.top -=self.speed
        elif self.direction=="D":
            if self.rect.top + self.rect.height <= SCREEN_HEIGHT:
                self.rect.top +=self.speed
        elif self.direction=="R":
            if self.rect.left+self.rect.height<=SCREEN_WIDTH:
                self.rect.left +=self.speed
    # 射击
    def shot(self):
        pass
    # 展示坦克的方法
    def displayTank(self):
        # 选择展示的对象
        self.image=self.images[self.direction]
        # 调用blit方法进行展示
        MainGame.window.blit(self.image,self.rect)
#子弹类
class Bullet():
    def __init__(self,tank):
        # 加载图片
        self.image=pygame.image.load("img/enemymissile.gif")
        # 方向,子弹的方向即坦克的方向
        self.direction = tank.direction
        # 区域,根据加载的图片获取区域
        self.rect = self.image.get_rect()
        # 设置图片的left和top(与方向有关)
        if self.direction == "U":
            self.rect.left=tank.rect.left+tank.rect.width/2 -self.rect.width/2
            self.rect.top=tank.rect.top-self.rect.height
        if self.direction == "D":
            self.rect.left = tank.rect.left+tank.rect.width/2-self.rect.width/2
            self.rect.top = tank.rect.top + tank.rect.height
        if self.direction == "L":
            self.rect.left=tank.rect.left-self.rect.width
            self.rect.top=tank.rect.top+tank.rect.height/2-self.rect.height/2
        if self.direction =="R":
            self.rect.left=tank.rect.left+tank.rect.width
            self.rect.top=tank.rect.top+tank.rect.height/2-self.rect.height/2
        # 速度
        self.speed = 6


    # 移动
    def move(self):
        pass
    # 展示子弹的方法
    def displayBullet(self):
        MainGame.window.blit(self.image,self.rect)
# 我方坦克
class MyTank(Tank):
    def __init__(self):
        pass
# 敌方坦克
class EnemyTank(Tank):
    def __init__(self,left,top,speed):
        # 保存下载的图片
        self.images={"U":pygame.image.load("img/enemy1U.gif"),
                     "D":pygame.image.load("img/enemy1D.gif"),
                     "L":pygame.image.load("img/enemy1L.gif"),
                     "R":pygame.image.load("img/enemy1R.gif"),
                     }
        # 方向(随机生成方向)
        self.direction = self.randDirection()
        # 根据方向获取图片
        self.image=self.images[self.direction]
        # 根据图片获取区域
        self.rect=self.image.get_rect()
        # 设置图片的left,top
        self.rect.left=left
        self.rect.top=top
        # 速度
        self.speed=speed
        # 移动开关
        self.flag = True
        # 步数
        self.step =50
    # 随机生成方向
    def randDirection(self):
        num = random.randint(1,4)
        if num==1:
            return "U"
        elif num==2:
            return "D"
        elif num==3:
            return "L"
        elif num==4:
            return "R"
    # 敌方坦克随机移动的方法
    def randMove(self):
        if self.step<=0:
            self.direction = self.randDirection()
            self.step=50
        else:
            self.move()
            self.step-=1


# 墙壁类
class Wall():
    def __init__(self):
        pass
    # 展示墙壁的方法
    def displayWall(self):
        pass

# 爆炸效果类
class Explode():
    def __init__(self):
        pass
    #展示爆炸效果的方法
    def displayExplode(self):
        pass
# 音效类
class Music():
    def __init__(self):
        pass
    # 播放音乐
    def play(self):
        pass
if __name__=="__main__":
    MainGame().startGame()
    #MainGame().getTextSurface()

# 运行

1,出现的窗口正常

image.png

2,但控制台出现报警提示

pygame 1.9.6

Hello from the pygame community. https://www.pygame.org/contribute.html

按下右键,坦克向右移动

C:/Users/JIAN CHEN/PycharmProjects/my project/tank.py/tank13.py:197: DeprecationWarning: an integer is required (got type float).  Implicit conversion to integers using __int__ is deprecated, and may be removed in a future version of Python.

  self.rect.left=tank.rect.left+tank.rect.width/2 -self.rect.width/2

发射子弹

按下右键,坦克向右移动

按下右键,坦克向右移动

C:/Users/JIAN CHEN/PycharmProjects/my project/tank.py/tank13.py:204: DeprecationWarning: an integer is required (got type float).  Implicit conversion to integers using __int__ is deprecated, and may be removed in a future version of Python.

  self.rect.top=tank.rect.top+tank.rect.height/2-self.rect.height/2

发射子弹

按下右键,坦克向右移动

按下右键,坦克向右移动

C:/Users/JIAN CHEN/PycharmProjects/my project/tank.py/tank13.py:200: DeprecationWarning: an integer is required (got type float).  Implicit conversion to integers using __int__ is deprecated, and may be removed in a future version of Python.

  self.rect.left = tank.rect.left+tank.rect.width/2-self.rect.width/2

发射子弹

按下右键,坦克向右移动

按下右键,坦克向右移动

发射子弹

根据报警提示,做了修改,增加了int方法,再次运行,控制台已没有报警。

请教老师,这是为什么啊?

# encoding:utf-8
"""
新增功能:
      完善子弹类


"""
import pygame,time,random
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 450
BG_COLOR = pygame.Color(0,0,0)
TEXT_COLOR = pygame.Color(255,0,0)
class MainGame():
    window = None
    my_tank = None
    # 存储敌方坦克的列表
    Enemylist =[]
    # 定义敌方坦克的数量
    EnemyCount = 10
    # 存储我方子弹的列表
    myBulletlist=[]
    def __init__(self):
        pass
    # 开始游戏
    def startGame(self):
        # 加载主窗口
        # 初始化窗口
        pygame.display.init()
        # 初始化我方坦克(建立我方坦克的实例对象)
        MainGame.my_tank=Tank(350,360)
        # 初始化敌方坦克(建立敌方方坦克的实例对象)
        self.createEmenyTank()
        # 设置窗口的大小及显示
        MainGame.window=pygame.display.set_mode([SCREEN_WIDTH,SCREEN_HEIGHT])
        # 设置窗口标题
        pygame.display.set_caption("坦克大战1.00")
        while True:
            # 设置循环时间
            time.sleep(0.05)
            # 设置背景颜色
            MainGame.window.fill(BG_COLOR)
            # 绘制文字
            MainGame.window.blit(self.getTextSurface("敌方坦克的所有数量%d"%len(MainGame.Enemylist)),(10,10))
            # 展示我方坦克
            MainGame.my_tank.displayTank()
            # 展示敌方坦克
            self.blitEnemyTank()
            # 展示我方子弹
            self.blitMyBullet()
            # 我方坦克可以移动的信号开关
            if not MainGame.my_tank.stop:
                MainGame.my_tank.move()
            # 通过事件来控制游戏(关闭,移动)
            self.getEvent()
            # 更新屏幕
            pygame.display.update()
    # 初始化敌方坦克(建立敌方方坦克的实例对象)
    def createEmenyTank(self):
        top=100
        # 循环生成坦克
        for i in range(MainGame.EnemyCount):
            left = random.randint(0,600)
            speed = random.randint(1,4)
            enemy=EnemyTank(left,top,speed)
            MainGame.Enemylist.append(enemy)
    # 展示敌方坦克
    def blitEnemyTank(self):
        # 遍历敌方坦克列表
        for enemy in MainGame.Enemylist:
            enemy.displayTank()
            enemy.randMove()
    # 展示我方子弹
    def blitMyBullet(self):
        for myBullet in MainGame.myBulletlist:
            myBullet.displayBullet()


    # 结束游戏
    def endGame(self):
        print("爽不爽,再来一局?")
        exit()
    # 左上角添加文字
    def getTextSurface(self,text):
        # 初始化文字
        pygame.font.init()
        # 查看所有字体
        #print(pygame.font.get_fonts())
        # 创建文字对象
        font=pygame.font.SysFont("fangsong",18)
        # 绘制文字信息
        textSurface=font.render(text,True,TEXT_COLOR)
        return textSurface
    # 获取事件
    def getEvent(self):
        # 获取所有事件
        eventlist=pygame.event.get()
        # 遍历事件列表
        for event in eventlist:
            # 判断按下的键是是关闭还是键盘按下
            # 如果按下的退出,关闭游戏
            if event.type == pygame.QUIT:
                self.endGame()
            # 如果是键盘的按下
            if event.type == pygame.KEYDOWN:
                # 判断按下的是上,下,左,右
                if event.key == pygame.K_LEFT:
                    # 切换方向
                    MainGame.my_tank.direction="L"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_RIGHT:
                    # 切换方向
                    MainGame.my_tank.direction="R"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_UP:
                    # 切换方向
                    MainGame.my_tank.direction="U"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_DOWN:
                    # 切换方向
                    MainGame.my_tank.direction ="D"
                    # 移动开关开启,可以移动
                    MainGame.my_tank.stop = False
                    MainGame.my_tank.move()
                    print("按下右键,坦克向右移动")
                elif event.key == pygame.K_SPACE:
                    myBullet=Bullet(MainGame.my_tank)
                    MainGame.myBulletlist.append(myBullet)
                    print("发射子弹")

class Tank():
    # 增加坦克位置属性,距离左边left,距离上边top
    def __init__(self,left,top):
        # 保存下载的坦克图片
        self.images={"U":pygame.image.load("img/p1tankU.gif"),
                     "D":pygame.image.load("img/p1tankD.gif"),
                     "L":pygame.image.load("img/p1tankL.gif"),
                     "R":pygame.image.load("img/p1tankR.gif"),
                     }
        # 方向
        self.direction="U"
        # 根据方向选择图片
        self.image=self.images[self.direction]
        # 根据图片获取区域
        self.rect=self.image.get_rect()
        # 设置图片的left,top
        self.rect.left=left
        self.rect.top=top
        # 速度 根据速度快慢实现移动
        self.speed=10
        # 设置移动开关
        self.stop = True
    # 移动
    def move(self):
        # 根据方向和移动两属性推算移动距离
        # 判断确定方向
        if self.direction=="L":
            if self.rect.left>0:
                self.rect.left -=self.speed
        elif self.direction=="U":
            if self.rect.top>0:
                self.rect.top -=self.speed
        elif self.direction=="D":
            if self.rect.top + self.rect.height <= SCREEN_HEIGHT:
                self.rect.top +=self.speed
        elif self.direction=="R":
            if self.rect.left+self.rect.height<=SCREEN_WIDTH:
                self.rect.left +=self.speed
    # 射击
    def shot(self):
        pass
    # 展示坦克的方法
    def displayTank(self):
        # 选择展示的对象
        self.image=self.images[self.direction]
        # 调用blit方法进行展示
        MainGame.window.blit(self.image,self.rect)
#子弹类
class Bullet():
    def __init__(self,tank):
        # 加载图片
        self.image=pygame.image.load("img/enemymissile.gif")
        # 方向,子弹的方向即坦克的方向
        self.direction = tank.direction
        # 区域,根据加载的图片获取区域
        self.rect = self.image.get_rect()
        # 设置图片的left和top(与方向有关)
        if self.direction == "U":
            self.rect.left=tank.rect.left+int(tank.rect.width/2) -int(self.rect.width/2)
            self.rect.top=tank.rect.top-self.rect.height
        if self.direction == "D":
            self.rect.left = tank.rect.left+int(tank.rect.width/2)-int(self.rect.width/2)
            self.rect.top = tank.rect.top + tank.rect.height
        if self.direction == "L":
            self.rect.left=tank.rect.left-self.rect.width
            self.rect.top=tank.rect.top+int(tank.rect.height/2)-int(self.rect.height/2)
        if self.direction =="R":
            self.rect.left=tank.rect.left+tank.rect.width
            self.rect.top=tank.rect.top+int(tank.rect.height/2)-int(self.rect.height/2)
        # 速度
        self.speed = 6


    # 移动
    def move(self):
        pass
    # 展示子弹的方法
    def displayBullet(self):
        MainGame.window.blit(self.image,self.rect)
# 我方坦克
class MyTank(Tank):
    def __init__(self):
        pass
# 敌方坦克
class EnemyTank(Tank):
    def __init__(self,left,top,speed):
        # 保存下载的图片
        self.images={"U":pygame.image.load("img/enemy1U.gif"),
                     "D":pygame.image.load("img/enemy1D.gif"),
                     "L":pygame.image.load("img/enemy1L.gif"),
                     "R":pygame.image.load("img/enemy1R.gif"),
                     }
        # 方向(随机生成方向)
        self.direction = self.randDirection()
        # 根据方向获取图片
        self.image=self.images[self.direction]
        # 根据图片获取区域
        self.rect=self.image.get_rect()
        # 设置图片的left,top
        self.rect.left=left
        self.rect.top=top
        # 速度
        self.speed=speed
        # 移动开关
        self.flag = True
        # 步数
        self.step =50
    # 随机生成方向
    def randDirection(self):
        num = random.randint(1,4)
        if num==1:
            return "U"
        elif num==2:
            return "D"
        elif num==3:
            return "L"
        elif num==4:
            return "R"
    # 敌方坦克随机移动的方法
    def randMove(self):
        if self.step<=0:
            self.direction = self.randDirection()
            self.step=50
        else:
            self.move()
            self.step-=1


# 墙壁类
class Wall():
    def __init__(self):
        pass
    # 展示墙壁的方法
    def displayWall(self):
        pass

# 爆炸效果类
class Explode():
    def __init__(self):
        pass
    #展示爆炸效果的方法
    def displayExplode(self):
        pass
# 音效类
class Music():
    def __init__(self):
        pass
    # 播放音乐
    def play(self):
        pass
if __name__=="__main__":
    MainGame().startGame()
    #MainGame().getTextSurface()

再次运行

pygame 1.9.6

Hello from the pygame community. https://www.pygame.org/contribute.html

发射子弹

按下右键,坦克向右移动

发射子弹

按下右键,坦克向右移动

发射子弹

按下右键,坦克向右移动

发射子弹

爽不爽,再来一局?


Process finished with exit code 0

另外,视频老师关于子弹区域的计算是不是有些问题啊?这是我的计算,请老师看一下对不对?

image.png

Python 全系列/第二阶段:Python 深入与提高/游戏开发-坦克大战 6801楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 6802楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/手写服务器项目(旧) 6803楼
JAVA 全系列/第十三阶段:分布式文件存储与数据缓存/Redis 6804楼
Python 全系列/第二阶段:Python 深入与提高/游戏开发-坦克大战 6805楼

飞机大战.zip

老师这个是源码,飞机没有显示出来

JAVA 全系列/第一阶段:JAVA 快速入门/飞机大战小项目训练 6806楼

Flask.rar

image.png

这个面包屑和div的框不是上下分布??

image.png

这个重置用户密码的按钮,无法获得ID,在提示框上显示不出来,导致后边的重置代码也无法运行

Python 全系列/第九阶段:Flask百战电商后台系统/Flask百战电商后台项目 6807楼
JAVA 全系列/第七阶段:生产环境部署与协同开发/Linux 6808楼

老师我跟着视频又写了一遍,同样的代码在demo(我用来跟着老师敲的工程)可以成功跑起来,监听器也会被触发那些Added     Removed    Replaced    的输出语句再清空控制台然后访问    attr.do    也可以被打印出来,但是在demo_test(我用来练习的工程)就没法触发监听器,导致清空控制台再访问    attr.do只有以下结果


image.png


但是如果监听器没被触发那么为什么启动Tomcat控制台就会有以下结果


image.png


源码如下:

package com.bjsxt.listener;

import javax.servlet.ServletContextAttributeEvent;
import javax.servlet.ServletContextAttributeListener;

/**
 * ServletContext对象属性操作监听器
 */
public class ServletContextAttrListener implements ServletContextAttributeListener {
    @Override
    public void attributeAdded(ServletContextAttributeEvent scae) {
        System.out.println("---------------Added Started-----------------");
        //获取属性名和属性值
        System.out.println(scae.getName()+"-------"+scae.getValue());
        //取出ServletContext对象
        System.out.println(scae.getServletContext());
        System.out.println("---------------Added Ended-----------------");
    }

    @Override
    public void attributeRemoved(ServletContextAttributeEvent scae) {
        System.out.println("---------------Removed Started-----------------");
        //获取属性名和属性值
        System.out.println(scae.getName()+"-------"+scae.getValue());
        //取出ServletContext对象
        System.out.println(scae.getServletContext());
        System.out.println("---------------Removed Ended-----------------");
    }

    @Override
    public void attributeReplaced(ServletContextAttributeEvent scae) {
        System.out.println("---------------Replaced Started-----------------");
        //获取属性名和属性值
        System.out.println(scae.getName()+"-------"+scae.getValue());
        //取出ServletContext对象
        System.out.println(scae.getServletContext());
        System.out.println("---------------Replaced Ended-----------------");
    }
}
package com.bjsxt.servlet;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/attr.do")
public class ServletContextAttrServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取ServletContext对象
        ServletContext servletContext = this.getServletContext();
        //调用测试监听器的三个方法
        servletContext.setAttribute("key","BJSXT");
        servletContext.setAttribute("key","ITBZ");
        servletContext.removeAttribute("key");
    }
}









JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 6809楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写带有提示文字的滚动条</title>
    <style>
        div{
            width: 25px;
            height: 25px;
            border: 1px solid;
            line-height: 25px;
            text-align: center;
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="5">
<div></div>
<script>
    //获取元素
    var input = document.querySelector('input');
    var div = document.querySelector('div');
    var flag = false;
    //给input填加滑动事件
    input.onmousemove =function () {
        if (flag){
            //获取鼠标移动时坐标
            //console.log('(x,y):('+event.clientX+','+event.clientY+')');
            var divx = input.clientX;
            //当x坐标大于120(移出滚动条时,div隐藏)
            if (divx>120){
                div.style.display='none';
            }
            ////当x坐标小于14(移出滚动条时,div隐藏)
            if (divx<14){
                div.style.display='none';
            }
            else {
                //拖动时div块显示
                div.style.display='block';
            }
            //div的left属性赋值,div跟随上面的移动
            //style后面赋值必须为字符串
            div.style.left=event.clientX-12.5+'px';
            //把input实时的值赋到div块内
            div.innerHTML=input.value;
        }
    };
    //当鼠标按下时,div显示
    input.onmousedown=function () {
        flag=true;
        div.style.display='block';

    };
    //当鼠标抬起时,div隐藏
    input.onmouseup=function () {
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

老师,我想设置在鼠标移出滚动条范围后,鼠标按住时,div块也隐藏掉,但是并没有实现。这个应该如何实现?

图片.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 6810楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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