抄代码

编程项目

HTML JavaScript CSS js

HTML源码

抄

html滚动效果代码

创建于 2024-03-21 17:55:33

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动效果示例</title>
<style>
  .scrolling-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: scroll 5s linear infinite;
  }
 
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
</head>
<body>
 
<div class="scrolling-text">
  这是一个滚动的文本效果，它会不断地从右向左滚动。
</div>
 
</body>
</html>
CSS HTML

抄

时钟代码，在HTML中实现动态的时钟

创建于 2024-03-21 17:54:18

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Clock</title>
<style>
  #clock {
    font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div id="clock"></div>

<script>
function updateClock() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // Add leading zeros if needed
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;

  // Format the time
  var timeString = hours + ":" + minutes + ":" + seconds;

  // Update the clock element
  document.getElementById("clock").innerHTML = timeString;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to display the clock immediately
updateClock();
</script>
</body>
</html>
CSS HTML JavaScript js

抄

html5 日历网页代码

创建于 2024-03-21 17:50:58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Calendar</h2>

<table>
    <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody id="calendar-body">
    </tbody>
</table>

<script>
    function generateCalendar(year, month) {
        const calendarBody = document.getElementById("calendar-body");
        calendarBody.innerHTML = "";

        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();
        const startingDay = firstDay.getDay();

        let date = 1;
        for (let i = 0; i < 6; i++) {
            const row = document.createElement("tr");

            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < startingDay) {
                    const cell = document.createElement("td");
                    row.appendChild(cell);
                } else if (date > daysInMonth) {
                    break;
                } else {
                    const cell = document.createElement("td");
                    cell.textContent = date;
                    row.appendChild(cell);
                    date++;
                }
            }

            calendarBody.appendChild(row);
            if (date > daysInMonth) break;
        }
    }

    // Usage
    const today = new Date();
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth();
    generateCalendar(currentYear, currentMonth);
</script>

</body>
</html>
HTML

抄

音乐播放器代码 -播放器代码

创建于 2024-03-21 17:12:40

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单网页音乐播放器</title>  
<style>  
  /* 简单的样式 */  
  .player {  
    margin: 20px;  
    text-align: center;  
  }  
  .controls {  
    margin-top: 10px;  
  }  
  button {  
    margin: 5px;  
    padding: 10px 20px;  
    font-size: 16px;  
  }  
</style>  
</head>  
<body>  
  
<div class="player">  
  <audio id="audioPlayer" controls preload="auto">  
    <source src="YOUR_MUSIC_FILE_URL" type="audio/mpeg">  
    您的浏览器不支持audio元素。  
  </audio>  
  <div class="controls">  
    <button onclick="playAudio()">播放</button>  
    <button onclick="pauseAudio()">暂停</button>  
    <button onclick="stopAudio()">停止</button>  
  </div>  
</div>  
  
<script>  
var audioPlayer = document.getElementById('audioPlayer');  
  
function playAudio() {  
  audioPlayer.play();  
}  
  
function pauseAudio() {  
  audioPlayer.pause();  
}  
  
function stopAudio() {  
  audioPlayer.pause();  
  audioPlayer.currentTime = 0; // 将播放位置重置为0  
}  
</script>  
  
</body>  
</html>
CSS HTML JavaScript js

抄

漂浮广告代码js方式有哪些？

创建于 2024-03-21 17:01:28

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>漂浮广告示例</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <div class="float-ad">  
        <a href="http://www.example.com" target="_blank">  
            <img src="ad-image.jpg" alt="广告图片">  
            <p>点击这里查看更多详情！</p>  
        </a>  
    </div>  
    <div class="content">  
        <!-- 这里是你的网页内容 -->  
    </div>  
</body>  
</html>.float-ad {  
    position: fixed; /* 漂浮效果 */  
    bottom: 20px; /* 距离页面底部的距离 */  
    right: 20px; /* 距离页面右侧的距离 */  
    width: 200px; /* 广告宽度 */  
    padding: 10px; /* 内边距 */  
    background-color: #fff; /* 背景色 */  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
    border-radius: 5px; /* 圆角 */  
    z-index: 9999; /* 确保广告在其它内容之上 */  
}  
  
.float-ad img {  
    width: 100%; /* 图片宽度占满广告容器 */  
    height: auto; /* 图片高度自动调整 */  
    display: block; /* 消除图片底部的默认间距 */  
    margin-bottom: 10px; /* 图片与文字之间的间距 */  
}  
  
.float-ad p {  
    font-size: 14px; /* 文字大小 */  
    color: #333; /* 文字颜色 */  
    text-align: center; /* 文字居中 */  
}
CSS HTML

抄

购物车代码怎么实现？

创建于 2024-03-21 16:57:56

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="cart">
    <h2>Shopping Cart</h2>
    <ul id="cart-items"></ul>
    <p>Total: $<span id="total-price">0</span></p>
    <button onclick="checkout()">Checkout</button>
  </div>
  
  <div class="products">
    <h2>Products</h2>
    <ul id="product-list">
      <li><button onclick="addItem('apple')">Add Apple</button></li>
      <li><button onclick="addItem('banana')">Add Banana</button></li>
      <li><button onclick="addItem('orange')">Add Orange</button></li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

.cart, .products {
  float: left;
  margin-right: 20px;
}

button {
  margin-top: 5px;
}

.cart {
  width: 250px;
}

.products {
  width: 200px;
}

let cart = {}; // 存储购物车商品和数量的对象
let prices = {"apple": 1.5, "banana": 0.75, "orange": 1.0}; // 商品价格

function addItem(item) {
  if (cart[item]) {
    cart[item]++;
  } else {
    cart[item] = 1;
  }
  updateCart();
}

function updateCart() {
  let cartItems = document.getElementById('cart-items');
  cartItems.innerHTML = '';
  let totalPrice = 0;

  for (let item in cart) {
    let quantity = cart[item];
    let price = prices[item];
    let itemTotal = quantity * price;
    
    let li = document.createElement('li');
    li.textContent = `${item}: ${quantity} x $${price.toFixed(2)} = $${itemTotal.toFixed(2)}`;
    cartItems.appendChild(li);

    totalPrice += itemTotal;
  }

  document.getElementById('total-price').textContent = totalPrice.toFixed(2);
}

function checkout() {
  alert('Total cost of your purchase is: $' + document.getElementById('total-price').textContent);
}
CSS HTML JavaScript js

抄

网站幻灯片代码，html幻灯片效果代码

创建于 2024-03-21 16:54:12

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Swiper 幻灯片示例</title>  
    <!-- 引入 Swiper 的 CSS -->  
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">  
</head>  
<body>  
  
<!-- Swiper 容器 -->  
<div class="swiper">  
    <div class="swiper-wrapper">  
        <div class="swiper-slide">幻灯片 1</div>  
        <div class="swiper-slide">幻灯片 2</div>  
        <div class="swiper-slide">幻灯片 3</div>  
        <!-- 更多幻灯片... -->  
    </div>  
    <!-- 如果需要分页器 -->  
    <div class="swiper-pagination"></div>  
    <!-- 如果需要导航按钮 -->  
    <div class="swiper-button-next"></div>  
    <div class="swiper-button-prev"></div>  
    <div class="swiper-scrollbar"></div>  
</div>  
  
<!-- 引入 Swiper 的 JavaScript -->  
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>  
  
<script>  
    // 当 DOM 加载完成后初始化 Swiper  
    document.addEventListener('DOMContentLoaded', function () {  
        var mySwiper = new Swiper('.swiper', {  
            // Swiper 配置  
            slidesPerView: 1, // 同时可见的幻灯片数量  
            spaceBetween: 30, // 幻灯片之间的间距  
            loop: true, // 是否循环播放  
            pagination: {  
                el: '.swiper-pagination',  
                clickable: true, // 分页器是否可点击  
            },  
            navigation: {  
                nextEl: '.swiper-button-next',  
                prevEl: '.swiper-button-prev',  
            },  
            scrollbar: {  
                el: '.swiper-scrollbar',  
                hide: true, // 是否隐藏滚动条  
            },  
            // 可以添加更多配置选项，如自动播放等  
        });  
    });  
</script>  
  
</body>  
</html>
CSS HTML JavaScript js

抄

免费网页在线客服系统代码，qq客服代码

创建于 2024-03-21 16:47:57

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边QQ客服</title>
<style>
    /* 样式可以根据需要进行修改 */
    .qq-service {
        position: fixed;
        right: 20px;
        bottom: 20px;
        background-color: #39F;
        color: #FFF;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    .qq-service:hover {
        transform: scale(1.1);
    }
</style>
</head>
<body>

<div class="qq-service" onclick="openQQ()">联系客服</div>

<script>
    function openQQ() {
        // 这里修改成你的QQ号
        var qqNumber = '123456789';
        window.open('http://wpa.qq.com/msgrd?v=3&uin=' + qqNumber + '&site=qq&menu=yes');
    }
</script>

</body>
</html>
CSS HTML JavaScript js

抄

网页特效代码烟花爆炸

创建于 2024-03-21 16:40:59

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>烟花盛开特效</title>  
    <style>  
        body, html {  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
            background-color: #000;  
        }  
        #fireworksCanvas {  
            position: absolute;  
            top: 50%;  
            left: 50%;  
            transform: translate(-50%, -50%);  
        }  
    </style>  
</head>  
<body>  
    <canvas id="fireworksCanvas" width="800" height="600"></canvas>  
    <script>  
        const canvas = document.getElementById('fireworksCanvas');  
        const ctx = canvas.getContext('2d');  
        const particles = [];  
  
        class Particle {  
            constructor(x, y, dx, dy, size, color, life) {  
                this.x = x;  
                this.y = y;  
                this.dx = dx;  
                this.dy = dy;  
                this.size = size;  
                this.color = color;  
                this.gravity = 0.1;  
                this.drag = 0.02;  
                this.life = life;  
            }  
  
            update() {  
                this.dy += this.gravity;  
                this.dx *= (1 - this.drag);  
                this.dy *= (1 - this.drag);  
                this.x += this.dx;  
                this.y += this.dy;  
                this.size *= 0.95;  
                this.life--;  
  
                if (this.life <= 0) {  
                    this.dead = true;  
                }  
            }  
  
            draw() {  
                if (!this.dead) {  
                    ctx.beginPath();  
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);  
                    ctx.fillStyle = this.color;  
                    ctx.fill();  
                    ctx.closePath();  
                }  
            }  
        }  
  
        function createFireworkExplosion(centerX, centerY) {  
            const numParticles = 200;  
            const spread = 50;  
            const initialVelocity = 3;  
            const sizeRange = [2, 6];  
            const colorRange = ['#FF1493', '#FFA500', '#00BFFF', '#FF0000', '#8B4513'];  
            const lifeRange = [30, 60];  
  
            for (let i = 0; i < numParticles; i++) {  
                const angle = Math.random() * Math.PI * 2;  
                const dx = Math.cos(angle) * spread * Math.random();  
                const dy = Math.sin(angle) * spread * Math.random();  
                const size = Math.random() * (sizeRange[1] - sizeRange[0]) + sizeRange[0];  
                const color = colorRange[Math.floor(Math.random() * colorRange.length)];  
                const life = Math.random() * (lifeRange[1] - lifeRange[0]) + lifeRange[0];  
                particles.push(new Particle(centerX, centerY, dx + initialVelocity, dy + initialVelocity, size, color, life));  
            }  
        }  
  
        function animate() {  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
  
            for (let i = particles.length - 1; i >= 0; i--) {  
                particles[i].update();  
                particles[i].draw();  
  
                if (particles[i].dead) {  
                    particles.splice(i, 1);  
                }  
            }  
  
            // 创建新的烟花爆炸  
            if (Math.random() < 0.01) {  
                createFireworkExplosion(canvas.width / 2, canvas.height / 2);  
            }  
  
            requestAnimationFrame(animate);  
        }  
  
        animate();  
    </script>  
</body>  
</html>
CSS HTML JavaScript js