标签 Javascript 下的文章

2024-08-15

以下是一个简单的HTML页面示例，包含了下拉框、按钮和固定表头的表格：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    thead th {
        background-color: #f2f2f2;
        position: sticky;
        top: 0;
    }
</style>
</head>
<body>
 
<select id="mySelect">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>
 
<button onclick="myFunction()">Click Me!</button>
 
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <!-- Add more rows as needed -->
    </tbody>
</table>
 
<script>
function myFunction() {
    alert('Button clicked!');
}
</script>
 
</body>
</html>

这个页面包含了一个下拉框、一个按钮和一个表格。表格的头部是固定的，这意味着当滚动表格的主体部分时，表头将保持在视图中。按钮点击时会弹出一个警告框。这个示例提供了一个简单的起点，您可以根据需要添加更多的下拉选项、表格行或自定义JavaScript功能。

- 阅读更多 -

js实现简单的倒计时功能

System

2024-08-15

所有,css3

以下是一个简单的JavaScript倒计时功能实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时示例</title>
<script>
function countdown() {
    var endTime = new Date("December 31, 2023 23:59:59").getTime();
    var now = new Date().getTime();
    var timeLeft = endTime - now;
 
    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
 
    document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
 
    if (timeLeft < 0) {
        clearInterval(interval);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}
 
var interval = setInterval(countdown, 1000);
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>

这段代码会在网页上显示一个倒计时，直至2023年12月31日23时59分59秒过期。你可以根据需要修改endTime变量来设置倒计时的结束时间。

- 阅读更多 -

echarts地图自定义label属性以及引入china.js

System

2024-08-15

所有,javascript

在ECharts中自定义地图的标签（label）属性，并且引入中国地图的示例代码如下：




// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/lib/chart/map');
 
// 引入中国地图数据
var chinaMapData = require('echarts/map/js/china');
 
// 注册中国地图
echarts.registerMap('china', chinaMapData);
 
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 自定义标签样式
var labelOptions = {
    normal: {
        show: true,
        textStyle: {
            color: 'red',
            fontSize: 12
        }
    }
};
 
// 配置项
var option = {
    series: [
        {
            type: 'map',
            map: 'china', // 设置使用的地图
            label: labelOptions, // 应用自定义标签样式
            // 其他配置...
        }
    ]
};
 
// 设置ECharts实例的配置项
myChart.setOption(option);

确保你的项目中已经安装了echarts依赖，并且有一个HTML元素（例如一个div）的id为main来承载ECharts实例。

注意：以上代码示例是基于ECharts 4.x及以上版本的语法。如果你使用的是ECharts 5.x版本，可能需要稍微调整代码，因为ECharts 5.x在模块系统和API上有较大变化。

System

2024-08-15

所有,css3

在CSS中，border属性用于设置元素的边框样式，font-style属性用于设置字体样式为斜体。

以下是一个简单的例子，演示如何在HTML元素上应用这些CSS属性：




<!DOCTYPE html>
<html>
<head>
<style>
.with-border {
  border: 1px solid black; /* 设置1像素的黑色实线边框 */
}
 
.italic {
  font-style: italic; /* 设置文本为斜体 */
}
</style>
</head>
<body>
 
<div class="with-border italic">这是一个有边框且斜体的div元素。</div>
 
</body>
</html>

在这个例子中，.with-border 类设置了一个边框，而 .italic 类则将文本设置为斜体。这两个类可以结合应用到同一个HTML元素上，以便该元素既有边框又是斜体。

System

2024-08-15

所有,css3

在Web前端开发中，使用HTML5、CSS3和JavaScript可以创建出丰富多样的网页。以下是一个简单的示例，展示了如何使用这些技术创建一个简单的喵喵画页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shiba Inu Profile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 25px;
        }
        .shiba-info {
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
            border: solid 1px #ccc;
            margin-bottom: 15px;
        }
        .shiba-image {
            width: 200px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <div class="shiba-info">
        <img class="shiba-image" src="shiba.jpg" alt="Shiba Inu">
        <h2>Shiba Inu Profile</h2>
        <p>The Shiba Inu is the smallest of the six original Shiba Inu dogs bred by Japanese farmers on the island of Hokkaido in the far northeast of the country.</p>
    </div>
 
    <script>
        // JavaScript code here to add dynamic functionality (if needed)
    </script>
</body>
</html>

在这个示例中，我们定义了一个简单的HTML结构，并通过内部样式表（<style>标签内）添加了一些基本的CSS样式。我们还包含了一张示例图片和一些关于喵喵的文本描述。这个页面可以进一步完善，比如添加交互性，使用JavaScript来处理用户事件或动态内容加载。但是，为了保持简洁，这里只提供了一个基础的静态示例。

- 阅读更多 -

VUE环境下 CSS3+JS 实现发牌翻牌

System

2024-08-15

所有,css3

在Vue环境下，你可以使用CSS3和JavaScript来实现发牌（分发牌）和翻牌（翻转牌片）的效果。以下是一个简单的示例：

安装Vue CLI并创建一个新项目（如果你还没有）。
在你的Vue组件中，设置一个牌组的数据结构，并添加一些牌。
使用CSS3来制作牌的样式和翻牌的动画。
使用JavaScript来处理牌的分发和翻转逻辑。

以下是一个简单的Vue组件示例：




<template>
  <div id="poker-container">
    <div
      v-for="(card, index) in cards"
      :key="index"
      class="poker-card"
      :style="{ backgroundColor: card.color }"
      @click="flipCard(index)"
    >
      <div class="card-face card-face-front"></div>
      <div class="card-face card-face-back">{{ card.value }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cards: [
        { value: 'A', color: 'red' },
        { value: '2', color: 'black' },
        // ... 其他牌
      ],
    };
  },
  methods: {
    flipCard(index) {
      const card = this.$el.querySelectorAll('.poker-card')[index];
      card.classList.add('card-flipped');
      // 可以添加setTimeout来设置翻牌动画结束后的回调（如发牌逻辑）
    },
  },
};
</script>
 
<style scoped>
.poker-card {
  width: 100px;
  height: 150px;
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
 
.card-face-front {
  background-color: #ccc;
}
 
.card-face-back {
  background-color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 150px;
}
 
.card-flipped {
  transform: rotateY(180deg);
}
</style>

在这个例子中，每当你点击一张牌时，它会立即翻转。你可以通过添加更多的逻辑来实现发牌的功能，例如随机排列牌组、发牌动画等。

- 阅读更多 -

【HTML | CSS | JS】再见2022，一起来写一个响应式跨年倒计时吧

System

2024-08-15

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022年倒计时</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #countdown {
            font-size: 3em;
            margin-bottom: 0.5em;
        }
    </style>
</head>
<body>
 
<div id="countdown"></div>
 
<script>
// 设置新年的日期
const newYear = new Date('Jan 1, 2023 00:00:00');
 
function countdown() {
    const now = new Date();
    const distance = newYear - now;
 
    // 时间计算
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
    // 输出结果到页面
    document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
                                                    + minutes + "分钟 " + seconds + "秒 ";
 
    // 如果剩余时间小于或等于0，停止计数
    if (distance < 0) {
        clearInterval(interval);
        document.getElementById('countdown').innerHTML = '已经到达2023年';
    }
}
 
// 每秒执行一次countdown函数
countdown();
const interval = setInterval(countdown, 1000);
</script>
 
</body>
</html>

这段代码创建了一个简单的HTML页面，其中包含了一个响应式的倒计时器。它使用了HTML定义结构，CSS为计数器设置样式，并且JavaScript代码负责计算时间并更新页面上的显示。这个实例提供了一个很好的教学示例，展示了如何使用JavaScript创建动态交互式网页。

- 阅读更多 -

CSS3技巧37：JS+CSS3 制作旋转图片墙

System

2024-08-15

所有,css3

以下是一个使用JavaScript和CSS3制作旋转图片墙的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Wall</title>
<style>
  .container {
    perspective: 1000px;
  }
  .image-wall {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .image-wall img {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="image-wall">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
    <img src="image6.jpg">
  </div>
</div>
<script>
  const imageWall = document.querySelector('.image-wall');
  const images = Array.from(document.querySelectorAll('img'));
 
  function cloneImages() {
    images.forEach((img, index) => {
      const clone = img.cloneNode();
      clone.style.position = 'absolute';
      clone.style.zIndex = images.length - index;
      imageWall.appendChild(clone);
    });
  }
 
  function calculateRotation() {
    const angle = 360 / images.length;
    images.forEach((img, index) => {
      img.style.transform = `rotateY(${angle * index}deg) translateZ(200px)`;
    });
  }
 
  cloneImages();
  calculateRotation();
</script>
</body>
</html>

在这个示例中，我们创建了一个包含6张图片的图片墙，通过CSS3的3D转换和动画来实现它们的旋转。JavaScript用于克隆图片并计算每个图片的旋转角度。注意，为了使旋转更加真实，每个图片需要是一个独立的元素，这样它们才能独立地旋转。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generatePoem()" />
        </div>
        <div id="poem"></div>
    </div>
    <script>
        function generatePoem() {
            var text = document.getElementById('text').value;
            var poem = text.split('').join('<br>') + '<br>哞哞哞';
            document.getElementById('poem').innerHTML = poem;
        }
    </script>
</body>
</html>

这段代码展示了如何使用JavaScript获取用户输入，并通过简单的字符串操作生成“喵喵”（即通过换行分隔每个字符来模拟），最后将生成的喵喵和用户输入的内容显示在网页上。这个示例简单易懂，适合作为学习前端开发的入门项目。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        #title {
            text-align: center;
            color: #333;
        }
        #drawing-area {
            margin-top: 10px;
            text-align: center;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">喵喵画网</h1>
        <div id="drawing-area">
            <canvas id="drawing-canvas" width="500" height="500"></canvas>
        </div>
    </div>
 
    <script>
        const canvas = document.getElementById('drawing-canvas');
        const context = canvas.getContext('2d');
 
        // 绘制图形的函数
        function drawShape(shape) {
            context.beginPath();
            context.arc(250, 250, 200, 0, Math.PI * 2); // 圆形
            context.strokeStyle = 'blue';
            context.stroke();
        }
 
        // 清除画布
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
 
        // 用户交互逻辑
        function handleInteraction(event) {
            clearCanvas();
            drawShape();
        }
 
        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', handleInteraction);
    </script>
</body>
</html>

这段代码创建了一个简单的喵喵画网页，用户将在画布上绘制一个蓝色的圆形图案，当鼠标移动时触发重绘事件。这个示例主要用于演示如何使用JavaScript和HTML5的<canvas>元素进行基本的交互式绘图。

- 阅读更多 -