标签 html5 下的文章

H5移动端选择器，layPicker移动端日期选择器，jquery移动端自定义选择器

2024-08-14

layPicker 是一款基于Layui的日期选择器插件，它提供了日期、年月、年周等多种选择模式。以下是一个使用 layPicker 的示例代码：

首先，需要引入Layui和layPicker的CSS和JS文件：




<link rel="stylesheet" href="path/to/layui/css/layui.css" />
<script src="path/to/layui/layui.js"></script>
<script src="path/to/layPicker/laydate.js"></script>

然后，你可以通过以下方式初始化 layPicker：




<div class="layui-inline">
  <input type="text" id="test1" placeholder="请选择日期" class="layui-input">
</div>
 
<script>
layui.use('layPicker', function(){
  var layPicker = layui.layPicker;
 
  layPicker.render({
    elem: '#test1', //指定元素
    type: 'date', //选择器类型
    ready: function(date){
      console.log(date); //打印初始日期
    },
    change: function(date){
      console.log(date); //打印选中日期
    }
  });
});
</script>

在这个例子中，我们创建了一个类型为日期的选择器，并指定了两个回调函数：ready 和 change，分别用于打印初始日期和选中日期。

请确保你的项目中已经正确引入了Layui和layPicker的资源，并且按照Layui的模块化规范来使用它们。

System

2024-08-14

所有,typescript

以下是搭建一个使用TypeScript、Vite 4、Vue 3、Pinia、Vant 和 Axios 的H5项目的步骤：

初始化项目：




npm create vite@latest my-app --template vue-ts




cd my-app
npm install

安装Vant：




npm install vant

安装Axios：




npm install axios

安装Pinia：




npm install pinia

配置Vite：

在vite.config.ts中引入并配置插件：




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()]
})

配置TypeScript：

在tsconfig.json中配置对Vant的类型支持：




{
  "compilerOptions": {
    "types": ["vant/types/vant"]
  }
}

在main.ts中配置Vant和Axios：




import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import axios from 'axios'
 
const app = createApp(App)
 
app.use(Vant)
 
// 配置axios全局配置，如基地址等
axios.defaults.baseURL = 'https://api.example.com'
 
app.provide('axios', axios)
 
app.mount('#app')

配置Pinia：

在src目录下创建store.ts：




import { defineStore } from 'pinia'
import { store } from './index'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

在src/store/index.ts中安装并导出Pinia：




import { createPinia } from 'pinia'
 
export const store = createPinia()

在main.ts中安装Pinia：




import { createApp } from 'vue'
import { store } from './store'
 
const app = createApp(App)
 
app.use(store)
 
app.mount('#app')

至此，项目的基本环境搭建完成。可以根据具体需求添加更多的配置和功能。

- 阅读更多 -

Java Web 01_HTML4&&HTML5基础标签语法

System

2024-08-14

所有,html

HTML4和HTML5的基础标签语法非常类似，下面是一些常用的标签示例：

HTML4和HTML5基本相同，但是HTML5添加了一些新的语义化标签和表单输入类型。




<!-- HTML4 和 HTML5 基本相同，但HTML5添加了新的标签和输入类型 -->
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 标题 -->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    
    <!-- 段落 -->
    <p>这是一个段落。</p>
    
    <!-- 链接 -->
    <a href="https://www.example.com">这是一个链接</a>
    
    <!-- 图片 -->
    <img src="image.jpg" alt="图片描述">
    
    <!-- 无序列表 -->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    
    <!-- 有序列表 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    
    <!-- 表格 -->
    <table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
    
    <!-- 表单 -->
    <form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password">
        <br>
        <input type="submit" value="提交">
    </form>
    
    <!-- HTML5中的新标签 -->
    <header>页头部分</header>
    <footer>页脚部分</footer>
    <nav>导航链接</nav>
    <section>一个区块</section>
    <article>一篇文章</article>
    <aside>侧边内容</aside>
    <details>额外细节</details>
    <dialog>对话框</dialog>
    
    <!-- HTML5中的新输入类型 -->
    <input type="email">
    <input type="url">
    <input type="date">
    <input type="time">
    <input type="number">
    <input type="search">
    <input type="range">
    <input type="color">
</body>
</html>

在HTML5中，添加了一些新的语义化标签和表单输入类型，以提高代码的可读性和可维护性。

System

2024-08-14

所有,css3

为了实现您所描述的需求，我们可以使用HTML、CSS和JavaScript来创建这个功能。以下是一个简单的示例，展示了如何使用这些技术实现您的需求。

HTML部分:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Pages</title>
<style>
  .container {
    overflow: hidden;
    position: relative;
  }
  .page {
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    transition: transform 0.5s ease;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
  }
</style>
</head>
<body>
<div class="container">
  <div class="page" id="page1" style="transform: translateX(0);">1</div>
  <div class="page" id="page2" style="transform: translateX(100%);">2</div>
  <!-- Add more pages here if needed -->
</div>
 
<script>
  let x1 = 0, x2 = 0, dx = 0, dy = 0, dragging = false;
 
  const container = document.querySelector('.container');
  const pages = document.querySelectorAll('.page');
  let currentPage = 0;
 
  container.addEventListener('touchstart', (e) => {
    x1 = e.touches[0].pageX;
    y1 = e.touches[0].pageY;
    dragging = true;
  }, { passive: true });
 
  container.addEventListener('touchmove', (e) => {
    if (!dragging) return;
    e.preventDefault();
    x2 = e.touches[0].pageX;
    y2 = e.touches[0].pageY;
    dx = x2 - x1;
    dy = y2 - y1;
 
    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 30) {
      e.preventDefault();
      container.style.cursor = 'pointer';
      dx = dx * 0.2;
      container.style.transform = `translateX(${dx}px)`;
    }
  });
 
  container.addEventListener('touchend', (e) => {
    dragging = false;
    if (dx > 0) {
      // Swipe left
      if (currentPage > 0) {
        navigateToPage(currentPage - 1);
      }
    } else {
      // Swipe right
      if (currentPage < pages.length - 1) {
        navigateToPage(currentPage + 1);
      }
    }
    container.style.transition = 'transform 0.5s ease';
    container.style.transform = '';
  });
 
  function navigateToPage(newPageIndex) {
    pages[currentPage].style.transform = `translateX(${100 * (newPageIndex - currentPage)}%)`;
    currentPage = newPageIndex;
  }
</script>
</body>
</html>

在这个示例中，我们使用了触摸事件来处理滑动。当用户滑动时，我们计算出滑动的距离并更新容器的transform属性来实现滑

- 阅读更多 -

HTML5 纯CSS3实现正方体旋转3D效果，零基础也能看得懂

System

2024-08-14

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D正方体</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg);
    animation: rotate 5s infinite linear;
  }
 
  .box .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ff6347;
    opacity: 0.5;
  }
 
  .box .front {
    background: #ff6347;
  }
 
  .box .back {
    background: #ffbb33;
    transform: rotateY(180deg);
  }
 
  .box .right {
    background: #ffff66;
    transform: rotateY(90deg);
  }
 
  .box .left {
    background: #66ff66;
    transform: rotateY(-90deg);
  }
 
  .box .top {
    background: #66ffff;
    transform: rotateX(90deg);
  }
 
  .box .bottom {
    background: #6666ff;
    transform: rotateX(-90deg);
  }
 
  @keyframes rotate {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="box">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>
</body>
</html>

这段代码使用了HTML和CSS3，利用transform-style: preserve-3d;实现3D效果，并通过animation属性实现自动旋转。每个面都有不同的背景色，创建了一个立体的正方体效果。对于零基础的开发者来说，这是一个很好的学习示例，可以通过它了解如何使用CSS3创建3D动画。

System

2024-08-14

所有,css3

以下是一个使用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>七夕生日蛋糕烟花特效</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #16475b;
    overflow: hidden;
  }
  canvas {
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/DotScreenShader.js"></script>
<script>
  // 此处省略七夕生日蛋糕的创建代码和烟花发射器的实现
</script>
</body>
</html>

这个示例中，我们使用了Three.js库来创建场景、相机、灯光和七夕生日蛋糕模型，并实现了烟花发射器的逻辑。在实际应用中，你需要实现createCake和createFireworks函数来分别创建蛋糕和烟花模型，并初始化发射器。

请注意，上述代码示例省略了实际的七夕生日蛋糕和烟花发射器的创建逻辑，因为这些部分通常是自定义的，并且会根据具体的场景和需求有所不同。你需要根据自己的情况来实现这部分的代码。

System

2024-08-14

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS+DIV页面布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .content {
            margin-top: 50px;
            padding: 10px;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: calc(100vh - 50px);
            background-color: #f2f2f2;
            padding: 10px;
            overflow: auto;
        }
        .main-content {
            margin-left: 210px; /* 宽度为200px + 10px边距 */
            height: calc(100vh - 50px);
            background-color: #fff;
            padding: 10px;
            overflow: auto;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>页头</h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>侧边栏内容...</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>主要内容区域...</p>
        </div>
    </div>
    <div class="footer">
        <h1>页脚</h1>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS创建一个固定头部和底部的布局，并且使用DIV元素来构建一个两栏的主要内容区域。侧边栏使用了固定宽度并且能够在高度上自适应屏幕，主要内容区域则根据侧边栏宽度进行了适当的偏移。在这个简单的例子中，我们也看到了如何使用CSS的calc()函数来进行计算，以便于实现更复杂的布局。

System

2024-08-14

所有,css3

在HTML中，表格的边框颜色可以通过CSS来设置。如果你想设置表格的亮边框颜色和暗边框颜色，可以使用CSS的border-color和border属性。

以下是一个简单的例子，展示如何设置表格的亮边框颜色和暗边框颜色：




<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 移除表格之间的间隔 */
  }
  table, th, td {
    border: 1px solid black; /* 设置边框宽度和样式 */
  }
  th {
    height: 50px;
    background-color: #f2f2f2; /* 设置表头背景色 */
  }
  td {
    padding: 10px;
  }
  /* 设置亮边框颜色 */
  th, td {
    border-color: #555;
  }
  /* 设置暗边框颜色 */
  table tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  table tr:nth-child(even) {
    background-color: #fdfdfd;
  }
</style>
</head>
<body>
 
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <!-- 更多行... -->
</table>
 
</body>
</html>

在这个例子中，我们使用CSS选择器为表格的表头(th)和数据单元格(td)设置了亮边框颜色，并且通过:nth-child伪类选择器为奇数行和偶数行设置了不同的背景色作为暗边框颜色。border-collapse: collapse; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。

- 阅读更多 -

h5导航跳色

System

2024-08-14

所有,css

在HTML5中，实现导航跳色通常意味着在用户悬停或点击时改变导航项的颜色。这可以通过CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease; /* 平滑过渡颜色 */
}
 
nav a:hover {
  color: #F00; /* 鼠标悬停时的颜色 */
}

这段代码中，我们使用了CSS的:hover伪类选择器来定义当用户将鼠标悬停在导航链接上时，链接的颜色会改变。transition属性确保了颜色的变化是平滑的。

- 阅读更多 -

html5——CSS高级选择器

System

2024-08-14

所有,css

在HTML5中，CSS提供了多种高级选择器，以下是一些常用的高级选择器及其使用示例：

属性选择器：可以根据元素的属性或属性值来选择元素。




/* 选择所有具有title属性的元素 */
[title] { color: blue; }
 
/* 选择title属性值为hello的所有元素 */
[title=hello] { font-weight: bold; }
 
/* 选择title属性值以hello开头的所有元素 */
[title^=hello] { text-decoration: underline; }
 
/* 选择title属性值以hello结尾的所有元素 */
[title$=hello] { text-transform: uppercase; }
 
/* 选择title属性值包含（正则表达式）hello的所有元素 */
[title*=hello] { font-style: italic; }

伪类选择器：用于选择元素的特定状态。




/* 选择所有被激活的链接 */
a:active { color: yellow; }
 
/* 选择所有悬停的链接 */
a:hover { text-decoration: none; }
 
/* 选择所有获得焦点的输入框 */
input:focus { border: 2px solid red; }

伪元素选择器：用于选择元素的特定部分（如第一个字母、第一行等）。




/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

结构性伪类选择器：用于选择某种DOM元素（如父元素、子元素等）。




/* 选择每个无序列表的第一个<li>元素 */
ul li:first-child { color: purple; }
 
/* 选择每个无序列表中的最后一个<li>元素 */
ul li:last-child { text-transform: uppercase; }
 
/* 选择每个无序列表中的第一个<li>元素的直接子元素 */
ul li:first-of-type { font-weight: bold; }
 
/* 选择每个无序列表中的最后一个<li>元素的直接子元素 */
ul li:last-of-type { font-style: italic; }
 
/* 选择每个有note类的元素的第一个子元素 */
.note > :first-child { border-bottom: 1px solid black; }

伪元素选择器（与伪类选择器区分开来）：用于创建一些不在文档树中的元素，但可以用CSS样式格式化。




/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

以上代码展示了如何使用不同的CSS高级选择器来选择和格式化HTML元素。在实际应用中，可以根据需要选择合适的选择器并结合其他CSS规则来创建复杂的样式表。

- 阅读更多 -