1. 首页
  2. 标签
  3. Javascript
使用HTML、CSS和JavaScript来创建一个粒子效果，粒子会跟随鼠标点击位置生成
System
2024-08-16
所有,css

以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript创建一个跟随鼠标点击位置的粒子效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Effect</title>
<style>
  #particles-js {
    width: 100%;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
  }
</style>
</head>
<body>
 
<div id="particles-js"></div>
 
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
  particlesJS('particles-js', {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.25,
          "sync": false
        }
      },
      "size": {
        "value": 5,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 2,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
- 阅读更多 -
python系列&deep_study系列：Gradio中文教程Customizing your demo with CSS and Javascript
System
2024-08-16
所有,css

在上一节中，我们学习了如何使用Gradio库创建一个简单的机器学习模型demo，并且自定义了demo的页面布局。在这一节中，我们将学习如何使用CSS来进一步自定义我们的demo页面。

Gradio允许你添加自定义的CSS代码来进一步美化你的demo。你可以通过interface函数的css参数来添加CSS代码。

下面是一个简单的例子，我们将为demo页面的标题添加自定义的CSS样式：




import gradio as gr
 
def predict(sentence):
    return f"You entered: {sentence}"
 
interface = gr.Interface(
    fn=predict,
    inputs="text",
    outputs="text",
    title="My Custom Demo",
    css="""
    .gradio-title {
        color: blue;
        font-size: 24px;
        font-weight: bold;
    }
    """
)
 
interface.launch()

在这个例子中，我们定义了一个输入文本框和一个输出文本框的接口。我们通过css参数添加了一段CSS代码，这段代码将改变页面标题的颜色、大小和粗细。

当你运行这段代码并访问生成的demo页面时，你会看到页面标题的样式已经变成了蓝色、24像素大小、加粗。

这只是CSS定制的一个简单例子，Gradio允许你添加更多复杂的CSS规则来进一步美化你的demo页面。你可以通过查阅Gradio官方文档来了解更多关于CSS定制的信息。

- 阅读更多 -
Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流
System
2024-08-16
所有,vue.js

要在Vue中实现摄像头视频分屏显示，并使用flv.js接收RTMP/FLV视频流，你需要做以下几步：

  1. 引入flv.js库。
  2. 设置video标签用于显示视频。
  3. 使用Vue的生命周期钩子来初始化flv.js并播放视频流。
  4. 使用WebRTC获取摄像头视频流，并将其分屏显示。

以下是一个简化的代码示例：




<template>
  <div>
    <video ref="videoEl" controls autoplay></video>
    <video ref="cameraVideoEl" width="320" height="240" autoplay></video>
  </div>
</template>
 
<script>
import flvjs from 'flv.js';
 
export default {
  name: 'VideoStream',
  mounted() {
    this.initVideo();
    this.initCameraVideo();
    this.initFlvPlayer();
  },
  methods: {
    initVideo() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoEl;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: '你的flv视频流地址'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
    initCameraVideo() {
      const constraints = {
        video: true,
        audio: true
      };
      let videoElement = this.$refs.cameraVideoEl;
      navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
          videoElement.srcObject = stream;
        })
        .catch(function(err) {
          console.log("getUserMedia error: " + err);
        });
    },
    initFlvPlayer() {
      // 这里可以添加flv.js的相关配置
    }
  }
};
</script>
 
<style>
/* 你的样式代码，比如分屏布局 */
</style>

确保你已经安装了flv.js库，并正确地引入到你的项目中。这个代码示例提供了一个简单的方法来同时显示来自RTMP/FLV视频流和摄像头视频，你可能需要根据你的具体布局和需求来调整样式。

- 阅读更多 -
HTML，CSS，JavaScript实例 —— 齿轮，按钮
System
2024-08-16
所有,css

以下是一个简单的示例，展示了如何使用HTML, CSS 和 JavaScript 创建一个带有旋转齿轮和按钮的简单界面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gear and Button Example</title>
<style>
  .gear {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateGear 5s linear infinite;
  }
 
  .button {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.7;
    cursor: pointer;
  }
 
  @keyframes rotateGear {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>
</head>
<body>
 
<div class="gear"></div>
<div class="button" onclick="rotateGear()"></div>
 
<script>
function rotateGear() {
  var gear = document.querySelector('.gear');
  gear.style.animation = 'none';
  var angle = Math.random() * 360; // 生成一个0到360度之间的随机角度
  gear.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
}
</script>
 
</body>
</html>

这段代码创建了一个页面，其中包含一个旋转的齿轮和一个可点击的按钮。当按钮被点击时，齿轮将停止旋转并随机旋转到一个新的角度。这个简单的示例展示了如何使用CSS动画和JavaScript来实现交互式设计元素。

- 阅读更多 -
Vue3使用Three.js导入gltf模型并解决模型为黑色的问题
System
2024-08-16
所有,javascript



<template>
  <div id="container"></div>
</template>
 
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
export default {
  name: 'ModelViewer',
  mounted() {
    const container = document.getElementById('container');
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild(renderer.domElement);
 
    const controls = new OrbitControls(camera, renderer.domElement);
    const loader = new GLTFLoader();
 
    loader.load('path/to/your/model.gltf', (gltf) => {
      scene.add(gltf.scene);
    }, undefined, (error) => {
      console.error(error);
    });
 
    // 添加环境光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
 
    // 添加平行光源
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);
 
    camera.position.z = 5;
 
    const animate = function () {
      requestAnimationFrame(animate);
 
      controls.update(); // 使相机控制更新
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
}
</script>
 
<style>
#container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

这段代码使用Vue 3和Three.js加载一个gltf模型，并解决了模型为黑色的问题。首先，我们在<script>标签中导入了必要的Three.js组件，并在mounted生命周期钩子中初始化了场景、相机、渲染器和模型加载器。我们还添加了环境光源和平行光源来改善场景的光照。最后，我们启动了一个循环来更新相机控制并渲染场景。

- 阅读更多 -
基于javaweb+mysql的ssm宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql)
System
2024-08-16
所有,ajax

这是一个基于JavaWeb技术栈的SSM (Spring, Spring MVC, MyBatis) 框架的宠物商城系统，包含后台管理系统。由于代码量较大，我无法提供完整的代码。但我可以提供一些核心代码片段和设计思路。

  1. 数据库连接配置 (applicationContext.xml)



<context:property-placeholder location="classpath:db.properties"/>
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
    <property name="driverClassName" value="${driver}"/>
    <property name="url" value="${url}"/>
    <property name="username" value="${username}"/>
    <property name="password" value="${password}"/>
</bean>
  1. 实体类 (Pet.java)



public class Pet {
    private Integer id;
    private String name;
    private String type;
    // 省略getter和setter方法
}
  1. Mapper接口 (PetMapper.java)



@Mapper
public interface PetMapper {
    List<Pet> selectAllPets();
    Pet selectPetById(Integer id);
    // 省略其他CRUD方法的声明
}
  1. 服务层 (PetService.java)



@Service
public class PetService {
    @Autowired
    private PetMapper petMapper;
    public List<Pet> getAllPets() {
        return petMapper.selectAllPets();
    }
    // 省略其他业务方法
}
  1. 控制器 (PetController.java)



@Controller
@RequestMapping("/pet")
public class PetController {
    @Autowired
    private PetService petService;
    @RequestMapping("/list")
    public ModelAndView list() {
        List<Pet> pets = petService.getAllPets();
        ModelAndView mav = new ModelAndView();
        mav.addObject("pets", pets);
        mav.setViewName("petList");
        return mav;
    }
    // 省略其他请求处理方法
}

以上代码仅展示了一部分核心代码，实际项目中还会涉及到更多的类和配置文件。这个项目是一个很好的学习资源，它展示了如何使用SSM框架进行项目开发的基础流程。

- 阅读更多 -
Ajax异步请求，获取本地json数据
System
2024-08-16
所有,ajax

要使用Ajax异步请求获取本地JSON数据，你可以使用JavaScript的XMLHttpRequest对象或者现代的fetchAPI。以下是使用这两种方法的示例代码。

使用XMLHttpRequest的示例：




var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json); // 处理获取到的JSON数据
  }
};
xhr.send();

使用fetch API的示例：




fetch('data.json')
  .then(response => response.json())
  .then(json => {
    console.log(json); // 处理获取到的JSON数据
  })
  .catch(error => console.error('Error fetching data:', error));

在这两种方法中，你需要确保data.json文件位于可以访问的服务器上的正确路径上，或者在浏览器的同源策略允许的范围内。如果是本地测试，你可能需要运行一个本地服务器，因为浏览器的同源策略会阻止从本地文件系统直接请求资源。

- 阅读更多 -
简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用
System
2024-08-16
所有,ajax

以下是一个使用原生HTML、JavaScript和AJAX实现的简单分页插件的示例代码。这个示例假设你已经有了一个后端API，它能够处理分页数据的请求。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页示例</title>
<script>
function fetchData(page) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('data-container').innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', 'your-backend-api-url?page=' + page, true);
    xhr.send();
}
</script>
</head>
<body>
<div id="data-container">
    <!-- 这里将显示加载的数据 -->
</div>
<div id="pagination">
    <!-- 这里将显示分页控件 -->
</div>
<script>
    // 假设后端返回的分页数据格式如下：
    // {
    //     "total_pages": 10,
    //     "current_page": 1
    //     // ...其他数据
    // }
    fetchData(1); // 默认加载第一页数据
</script>
</body>
</html>

在这个示例中，fetchData 函数负责使用AJAX向后端发送请求并获取数据。当请求成功返回后，数据将被插入到页面的data-container元素中。分页逻辑需要你的后端支持，并且在前端生成分页控件，通过点击分页控件的页码来调用fetchData函数并传递对应的页码。

请注意，这个示例没有实现实际的分页控件。你需要根据后端返回的分页数据（如总页数和当前页码）来动态生成分页控件，并在用户点击分页控件时调用fetchData函数。

- 阅读更多 -
Ajax 解释Ajax的XML和JSON格式，操作Ajax的几种封装方法【案例
System
2024-08-16
所有,ajax

Ajax（Asynchronous JavaScript and XML）是一种在无需刷新网页的情况下，与服务器交换数据的技术。Ajax可以用于从服务器获取XML或JSON格式的数据。

XML格式是一种标记语言，用于结构化数据，易于阅读和编写，但是相比JSON，它的数据体积更大，解析复杂，并且需要额外的解析步骤。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它的数据体积小，传输速度快。

操作Ajax的几种方法：

  1. 原生JavaScript的XMLHttpRequest对象。
  2. jQuery的$.ajax()方法。
  3. Fetch API（原生JavaScript提供的新的API，比XMLHttpRequest更简洁）。

以下是使用XMLHttpRequest发送Ajax请求获取JSON数据的示例代码：




var xhr = new XMLHttpRequest();
xhr.open("GET", "your_api_url", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};
xhr.send();

使用Fetch API获取JSON数据的示例代码：




fetch("your_api_url")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用jQuery的$.ajax()方法获取JSON数据的示例代码：




$.ajax({
  url: "your_api_url",
  type: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error("An error occurred: " + status + "\nError: " + error);
  }
});

以上代码演示了如何使用原生JavaScript、jQuery和Fetch API来进行Ajax请求，并处理返回的JSON数据。在实际应用中，你可以根据项目需求和个人喜好选择合适的方法。

- 阅读更多 -
Ajax：异步JavaScript和XML的笔记略解，不作为知识参考
System
2024-08-16
所有,ajax

Ajax（Asynchronous JavaScript and XML）技术不是一种单一的技术，而是几种技术的混合，这些技术结合在一起，可以在不重新加载页面的情况下，与服务器交换数据。

以下是使用Ajax技术的基本步骤：

  1. 创建一个XMLHttpRequest对象
  2. 设置HTTP请求
  3. 发送请求
  4. 处理服务器响应

以下是使用Ajax的示例代码：




// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 设置请求方法、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function () {
    // 请求完成并且响应状态码为 200
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            // 处理服务器响应的数据
            var response = xhr.responseText;
            console.log(response);
        } else {
            // 处理错误情况
            console.error('AJAX Request was unsuccessful');
        }
    }
};
 
// 发送请求
xhr.send();

这段代码演示了如何使用Ajax技术发送一个GET请求到服务器，并在请求成功完成后处理响应数据。这是Ajax的基本用法，实际应用中可能需要处理更复杂的逻辑，例如处理POST请求、发送数据、处理JSON响应等。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号