丝袜av在线观看|日本美女三级片在线播放|性欧美一区二区三区|小骚热免费国产视频|黑人va在线观看|女同国产91视频|五月丁香色播Av|国产凸凹视频一区二区|伊人电影久久99|国产成人无码一区二区观看

編程項(xiàng)目

HTML源碼

抄

html5 日歷網(wǎng)頁(yè)代碼

創(chuàng)建于 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>

抄

漂浮廣告代碼js方式有哪些？

創(chuàng)建于 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>點(diǎn)擊這里查看更多詳情！</p>  
    </a>  
</div>  
<div class="content">  
    <!-- 這里是你的網(wǎng)頁(yè)內(nèi)容 -->  
</div>  




</body>

</html>.float-ad {



position: fixed; /* 漂浮效果 */  
bottom: 20px; /* 距離頁(yè)面底部的距離 */  
right: 20px; /* 距離頁(yè)面右側(cè)的距離 */  
width: 200px; /* 廣告寬度 */  
padding: 10px; /* 內(nèi)邊距 */  
background-color: #fff; /* 背景色 */  
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */  
border-radius: 5px; /* 圓角 */  
z-index: 9999; /* 確保廣告在其它內(nèi)容之上 */  




}



.float-ad img {



width: 100%; /* 圖片寬度占滿廣告容器 */  
height: auto; /* 圖片高度自動(dòng)調(diào)整 */  
display: block; /* 消除圖片底部的默認(rèn)間距 */  
margin-bottom: 10px; /* 圖片與文字之間的間距 */  




}



.float-ad p {



font-size: 14px; /* 文字大小 */  
color: #333; /* 文字顏色 */  
text-align: center; /* 文字居中 */  




}

抄

購(gòu)物車代碼怎么實(shí)現(xiàn)？

創(chuàng)建于 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 = ; // 存儲(chǔ)購(gòu)物車商品和數(shù)量的對(duì)象
let prices = ; // 商品價(jià)格



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 = `$: $ x $$ = $$`;
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);
}

抄

網(wǎng)站幻燈片代碼，html幻燈片效果代碼

創(chuàng)建于 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>  
<!-- 如果需要分頁(yè)器 -->  
<div class="swiper-pagination"></div>  
<!-- 如果需要導(dǎo)航按鈕 -->  
<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>



// 當(dāng) DOM 加載完成后初始化 Swiper  
document.addEventListener('DOMContentLoaded', function () {  
    var mySwiper = new Swiper('.swiper', {  
        // Swiper 配置  
        slidesPerView: 1, // 同時(shí)可見的幻燈片數(shù)量  
        spaceBetween: 30, // 幻燈片之間的間距  
        loop: true, // 是否循環(huán)播放  
        pagination: {  
            el: '.swiper-pagination',  
            clickable: true, // 分頁(yè)器是否可點(diǎn)擊  
        },  
        navigation: {  
            nextEl: '.swiper-button-next',  
            prevEl: '.swiper-button-prev',  
        },  
        scrollbar: {  
            el: '.swiper-scrollbar',  
            hide: true, // 是否隱藏滾動(dòng)條  
        },  
        // 可以添加更多配置選項(xiàng)，如自動(dòng)播放等  
    });  
});  




</script>



</body>

</html>

抄

網(wǎng)頁(yè)特效代碼煙花爆炸

創(chuàng)建于 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);  
            }  
        }  

        // 創(chuàng)建新的煙花爆炸  
        if (Math.random() < 0.01) {  
            createFireworkExplosion(canvas.width / 2, canvas.height / 2);  
        }  

        requestAnimationFrame(animate);  
    }  

    animate();  
</script>  




</body>

</html>