2301_82138978 2023-12-23 20:33 采纳率: 50%
浏览 5

谁能帮我改改到底为什么篮球没有效果啊

</head>
<style>
    .three{
        margin: 0px auto;
        width:600px;
        height:260px;
        padding-left: 30px;
       margin-top:150px;
        border: 1px solid grey;
    }
    .red{
        margin-top: -15px;
        width: 460px;
        height: 75px;
        border: 8px solid red;
    }
    .blue{
        margin-top: -91px;
        margin-right: 32px;
float:right;
border:8px solid blue;
    }
    .box{
        width: 52px;
        height: 52px;
        margin: 10px;
        float: left;
        border: 2px solid slateblue;
    }
    .red input{
        width:45px;
        height: 45px;
        background-color: red;
        font-size: 30px;
        text-align: center;
        border-radius: 100%;
        color: white;
    }
    .blue input{
        width:45px;
        height: 45px;
        background-color: blue;
        font-size: 30px;
        text-align: center;
        border-radius: 100%;
        color: white;
    }
    .anniu{
        float: left;
        padding-left:20px;
        margin-top: 30px;
    }
    button{
        margin-left: 10px;
        margin-right: 15px;
        width:110px;
    height: 40px;
    font-size: 20px;
    }
</style>
<body>
    <div class="three">
        <h1>双色球开奖（6+1）</h1>
        <div class="red">
            <div class="box"><input class="redBall" type="text"></div>
            <div class="box"><input class="redBall" type="text"></div>
            <div class="box"><input class="redBall" type="text"></div>
            <div class="box"><input class="redBall" type="text"></div>
            <div class="box"><input class="redBall" type="text"></div>
            <div class="box"><input class="redBall" type="text"></div>
        </div>
        <div class="blue">
            <div class="box"><input class="blueBall" type="text"></div>
        </div>
        <div class="anniu">
            <button id="startRedBall">红球开始</button>
            <button id="stopRedBall">红球停止</button>
            <button id="startBlueBall">蓝球开始</button>
            <button id="stopBlueBall">蓝球停止</button>
        </div>
    </div>
    <script>
const redBallsInputs = document.querySelectorAll('.redBall');
   const blueBallInput = document.querySelector('.blueBall input');
   const startRedBalls = document.getElementById('startRedBall');
   const stopRedBalls = document.getElementById('stopRedBall');
   const startBlueBall = document.getElementById('startBlueBall');
   const stopBlueBall = document.getElementById('stopBlueBall');
   let isGenerating = false;
   
   function generateRandomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
   }
   
   function getRedBalls() {
       if (!isGenerating) return;
       for (const input of redBallsInputs) {
           input.value = generateRandomNumber(1, 40);
       }
   }
   
   function getBlueBall() {
       if (!isGenerating) return;
       blueBallInput.value = generateRandomNumber(1, 15);
   }
   
   startRedBalls.addEventListener('click', () => {
       isGenerating = true;
       setInterval(getRedBalls, 100);
   });
   
   stopRedBalls.addEventListener('click', () => {
       isGenerating = false;
   });
   
   startBlueBall.addEventListener('click', () => {
       isGenerating = true;
       setInterval(getBlueBall, 100); 
   });
   
   stopBlueBall.addEventListener('click', () => {
       isGenerating = false;
   });
    </script>
</body>
  • 写回答

2条回答 默认 最新

  • 酷爱码 优质创作者: Java技术领域 2023-12-23 21:23
    关注

    修改后的代码

    
<!DOCTYPE html>
<html>
  <head>
    <title>双色球开奖（6+1）</title>
    <style>
      main {
        margin: 0 auto;
        max-width: 800px;
        text-align: center;
        padding-top: 50px;
      }

      h1 {
        font-size: 36px;
        font-weight: bold;
      }

      .balls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      }

      .red-balls {
        display: flex;
        margin-right: 10px;
      }

      .ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .red {
        background-color: #f44336;
        border: 2px solid #f44336;
      }

      .blue {
        background-color: #2196f3;
        border: 2px solid #2196f3;
      }

      button {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background-color: #4caf50;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>双色球开奖（6+1）</h1>
      <div class="balls">
        <div class="red-balls">
          <div class="ball red"></div>
          <div class="ball red"></div>
          <div class="ball red"></div>
          <div class="ball red"></div>
          <div class="ball red"></div>
          <div class="ball red"></div>
        </div>
        <div class="ball blue"></div>
      </div>
      <div class="buttons">
        <button id="start-red">开始生成红球</button>
        <button id="stop-red">停止生成红球</button>
        <button id="start-blue">开始生成蓝球</button>
        <button id="stop-blue">停止生成蓝球</button>
      </div>
    </main>

    <script>
      const redBalls = document.querySelectorAll('.red');
      const blueBall = document.querySelector('.blue');
      const startRedButton = document.getElementById('start-red');
      const stopRedButton = document.getElementById('stop-red');
      const startBlueButton = document.getElementById('start-blue');
      const stopBlueButton = document.getElementById('stop-blue');

      let isGeneratingRed = false;
      let isGeneratingBlue = false;

      function generateRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function getRedBalls() {
        if (!isGeneratingRed) return;

        for (const ball of redBalls) {
          ball.textContent = generateRandomNumber(1, 40);
        }
      }

      function getBlueBall() {
        if (!isGeneratingBlue) return;

        blueBall.textContent = generateRandomNumber(1, 15);
      }

      startRedButton.addEventListener('click', () => {
        isGeneratingRed = true;
        setInterval(getRedBalls, 100);
      });

      stopRedButton.addEventListener('click', () => {
        isGeneratingRed = false;
      });

      startBlueButton.addEventListener('click', () => {
        isGeneratingBlue = true;
        setInterval(getBlueBall, 100);
      });

      stopBlueButton.addEventListener('click', () => {
        isGeneratingBlue = false;
      });
    </script>
  </body>
</html>
    评论

报告相同问题？

  • scratch少儿编程逻辑思维游戏源码-冰上篮球.zip
    2025-04-28 21:42
    Scratch是一种由麻省理工学院媒体实验室开发的图形化编程语言，旨在让儿童和初学者通过拼接程序块的方式来学习编程基础。它通过形象的编程块使得学习过程更富有趣味性，特别适合未成年人在编程入门阶段的逻辑思维...
  • 少儿编程scratch项目源代码文件案例素材-篮球.zip
    2025-04-28 21:00
    在这个篮球项目的源代码文件中，孩子们可以学习到如何使用Scratch编程语言创建一个简单的篮球游戏。这个游戏的基本功能可能包括玩家控制的球员可以投篮、接球以及与电脑控制的对手球员进行互动等。通过这种方式，...
  • 少儿编程scratch项目源代码文件案例素材-天空篮球.zip
    2025-05-05 09:14
    Scratch是一款专为儿童设计的图形化编程语言，它允许孩子们通过拖拽编程块的方式，无需书写代码，即可实现动画、游戏、故事和交互式艺术品的创作。这种编程方式有助于培养孩子们的逻辑思维能力、创造力以及解决问题...
  • scratch少儿编程逻辑思维游戏源码-篮球(1).zip
    2025-05-02 13:16
    Scratch作为一款由麻省理工学院设计开发的面向儿童和初学者的编程语言，以其简洁易学的特性深受孩子们的喜爱。而“Scratch少儿编程逻辑思维游戏源码-篮球(1).zip”这份文件内容，正是提供了一套专门针对少儿的编程...
  • scratch少儿编程逻辑思维游戏源码-篮球闯关.zip
    2025-04-30 20:39
    Scratch是一种适合儿童使用的编程语言，它由麻省理工学院的终身幼儿园团队开发，旨在帮助儿童学习编程基础，通过拖拽式的编程块来完成程序的编写。它具有直观的操作界面和丰富的功能模块，使得儿童可以在无需学习...
  • 少儿编程scratch项目源代码文件案例素材-火柴人街头篮球.zip
    2025-04-27 20:42
    Scratch作为一种非常适合少儿编程的工具，其最大特点就是使用图形化编程块来代替复杂的编程语言，使得孩子们可以通过拖拽不同的代码块来控制游戏中的角色和对象。在这个火柴人街头篮球项目中，孩子们将会学习如何...
  • 少儿编程scratch项目源代码文件案例素材-篮球(2).zip
    2025-04-28 21:00
    通过篮球项目的实践操作，孩子们能够逐步掌握Scratch编程的基本技能，从而为进一步学习更复杂的编程语言打下坚实的基础。不仅如此，这类项目还能够帮助孩子们认识到编程与现实世界的联系，以及如何将编程应用于解决...
  • 少儿编程scratch项目源代码文件案例素材-篮球闯关.zip
    2025-04-28 21:00
    Scratch编程语言是一种专门为儿童设计的图形化编程语言，它通过拖拽代码块来实现程序的编写，非常适合初学者，尤其是儿童。因此，对于想要学习编程的少儿来说，通过具体的项目案例来学习是一条非常有效且直观的路径...
  • 【scratch2.0少儿编程-游戏原型-动画-项目源码】篮球小子.zip
    2025-09-14 11:45
    Scratch2.0作为一款专为儿童和初学者设计的编程语言，其图形化的界面和拖拽式的编程方式极大降低了编程的入门门槛，使得孩子们可以在创造和玩耍的过程中学习编程的逻辑思维。本次分享的资源为“篮球小子”，它是一套...
  • 【scratch2.0少儿编程-游戏原型-动画-项目源码】篮球赛加时赛.zip
    2025-09-14 11:45
    在计算机编程教育领域，尤其面向少儿的编程启蒙中，Scratch作为一种图形化编程语言，极大地降低了编程入门的门槛，激发孩子们的学习兴趣。该资源名为“篮球赛加时赛”，是一个典型的用Scratch 2.0创建的少儿编程游戏...
  • 篮球球员信息管理系统---增删改查，更新.zip
    2024-03-05 18:29
    【篮球球员信息管理系统---增删改查，更新.zip】是一个基于人工智能技术的项目实践，它主要涉及信息管理系统的设计与实现，使用了Java编程语言。在这个系统中，核心功能包括球员信息的增加、删除、修改和查询，这些...
  • scratch少儿编程逻辑思维游戏源码-灌篮跳跃.zip
    2025-05-04 21:22
    Scratch作为一种面向少儿的图形化编程语言，因其简单直观的特点，成为了儿童学习编程的入门工具。通过Scratch，孩子们可以不需要掌握复杂的编程语法，就能通过拖拽代码块的方式创作出自己的动画、游戏和故事，使得...
  • 少儿编程scratch项目源代码文件案例素材-灌篮跳跃.zip
    2025-05-03 20:36
    在该案例中，学生将学习如何通过Scratch编程语言来创建一个模拟篮球运动员完成灌篮动作的小游戏。孩子们将在这个过程中接触到Scratch的基本编程概念，包括角色设计、场景布置、事件触发、条件判断、循环控制等编程...
  • 少儿编程scratch项目源代码文件案例素材-灌篮之王.zip
    2025-04-27 20:38
    通过对“灌篮之王”游戏项目源代码文件的学习和修改，孩子们不仅能够掌握Scratch编程语言的使用，还能通过不断的实践和尝试，逐步提高自己的编程技能。而通过修改源代码，他们还能够对游戏进行个性化定制，实现自己...
  • 少儿编程scratch项目源代码文件案例素材-飞翔投篮.zip
    2025-04-27 20:35
    而“飞翔投篮”这一项目，是Scratch项目中的一个典型案例，它将编程与孩子们感兴趣的篮球运动相结合，以游戏的形式提高孩子们的编程兴趣。 本案例源代码文件“飞翔投篮”是针对初学者的一个完整项目，其中包含了...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 12月23日