分类 html5 下的文章

2024-08-15

在HTML5中，可以使用JavaScript的localStorage和sessionStorage对象来清除缓存。以下是清除页面所有缓存的示例代码：




// 清除localStorage缓存
window.localStorage.clear();
 
// 清除sessionStorage缓存
window.sessionStorage.clear();
 
// 清除cookies
var cookies = document.cookie.split(";");
 
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var eqPos = cookie.indexOf("=");
    var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

这段代码首先清除了localStorage和sessionStorage中的所有数据，然后通过将每个cookie的过期时间设置为1970年1月1日来删除所有cookies。这样，当页面下次加载时，它将不会读取任何缓存的数据。

- 阅读更多 -

Uniapp基本语言和开发规范

System

2024-08-15

所有,html5

在UniApp中，基础语言主要是Vue.js，开发者应当遵循Vue.js的开发规范。以下是一些基本的UniApp项目结构和代码示例：




|-- pages               // 存放所有页面
|   |-- index          // 首页
|       |-- index.vue  // 首页文件
|-- components          // 存放所有组件
|   |-- my-component  // 自定义组件
|       |-- my-component.vue  // 组件文件
|-- App.vue             // 应用配置，全局样式等
|-- main.js             // 入口文件，初始化vue实例
|-- manifest.json       // 配置应用名称、appid、版本等信息
|-- pages.json          // 配置页面路径、窗口表现等信息

index.vue 示例代码：




<template>
  <view>
    <text>Hello, UniApp!</text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  onLoad() {
    // 页面加载时的逻辑
  },
  methods: {
    // 页面方法
  }
};
</script>
 
<style>
/* 全局样式 */
page {
  background-color: #f0f0f0;
}
</style>

my-component.vue 示例代码：




<template>
  <view class="my-component">
    <text>This is a custom component</text>
  </view>
</template>
 
<script>
export default {
  props: {
    // 组件属性
  },
  data() {
    return {
      // 组件内部数据
    };
  },
  methods: {
    // 组件方法
  }
};
</script>
 
<style scoped>
.my-component {
  /* 组件样式 */
  color: #333;
}
</style>

在编写代码时，应遵循以下规范：

使用双大括号 {{ }} 进行数据绑定
使用 <script> 标签定义组件的数据和方法
使用 <style> 标签定义组件的样式，可以设置 scoped 属性保持样式局部作用域
组件命名使用kebab-case，即短横线分隔命名
使用 export default 导出组件，方便在其他组件或页面中导入使用

以上是UniApp项目的基本结构和代码规范，开发者应当在此基础上根据项目需求进行相应的扩展和定制。

- 阅读更多 -

uni-app的h5页面的onHide/onUnload方法不触发的问题解决

System

2024-08-15

所有,html5

onHide和onUnload是Uni-app中页面生命周期的方法，它们通常在页面隐藏或卸载时触发。如果你发现这些方法不触发，可能是以下原因：

方法拼写错误：检查方法名是否拼写正确。
生命周期错误：确保你的方法在正确的生命周期内。
事件绑定错误：确保你在页面的正确位置绑定了事件监听器。
页面错误导致：可能存在其他错误导致页面渲染异常，影响到生命周期的正常执行。

解决方法：

检查拼写：确认onHide和onUnload方法名称拼写正确。
检查生命周期：确保你的方法在onHide或onUnload适当的生命周期内。
检查事件绑定：确保你在页面的script标签中正确绑定了方法到生命周期钩子上。
检查代码错误：查看其他代码是否有错误，并修正它们，确保页面正确渲染和运行。

示例代码：




export default {
  onHide() {
    // 页面隐藏时的处理逻辑
    console.log('页面 onHide');
  },
  onUnload() {
    // 页面卸载时的处理逻辑
    console.log('页面 onUnload');
  }
}

确保以上步骤正确无误，通常可以解决onHide和onUnload不触发的问题。如果问题依然存在，可以查看官方文档或者社区支持寻求帮助。

- 阅读更多 -

哄她开心的圣诞树html源码，复制粘贴就能实现~

System

2024-08-15

所有,html5

以下是一个简单的HTML源代码示例，用于创建一棵有着彩虹般颜色的圣诞树，并且可以通过复制粘贴到你的网页上即可使用：




<!DOCTYPE html>
<html>
<head>
    <title>Christmas Tree</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .tree-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #563c0d;
        }
        .tree {
            width: 200px;
            height: 300px;
            background-color: #563c0d;
            border-radius: 50px;
            position: relative;
            animation: shake 5s infinite;
        }
        .tree::before {
            content: '';
            position: absolute;
            bottom: -50px;
            left: 50px;
            width: 80px;
            height: 80px;
            background-color: #563c0d;
            border-radius: 50%;
        }
        .tree::after {
            content: '';
            position: absolute;
            bottom: -70px;
            left: 30px;
            width: 10px;
            height: 30px;
            background-color: #563c0d;
            border-radius: 50%;
        }
        .lights {
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 120px;
            background: radial-gradient(circle at center

- 阅读更多 -

HTML5 FormData 方法介绍

System

2024-08-15

所有,html5

FormData 对象用以构建可用于提交的表单数据。它可以更加容易地发送表单数据，包括文件，而不需要构建一个字符串。

方法：

new FormData(): 创建一个新的 FormData 对象。
append(key, value): 添加一个新的键值对到 FormData 对象中。
delete(key): 从 FormData 对象中删除指定的键。
get(key): 获取指定键的第一个值。
getAll(key): 获取指定键的所有值。
set(key, value): 设置指定键的值。如果该键已存在，则会覆盖它。
has(key): 返回一个布尔值，表示 FormData 对象是否包含某个键。
entries(): 返回一个迭代器，可以遍历所有键值对。

示例代码：




// 创建一个新的 FormData 对象
var formData = new FormData();
 
// 添加键值对
formData.append('username', 'JohnDoe');
formData.append('userfile', document.getElementById('fileInput'));
 
// 删除键
formData.delete('username');
 
// 获取键的值
var value = formData.get('username');
 
// 获取所有指定键的值
var values = formData.getAll('username');
 
// 设置键的值
formData.set('username', 'JaneDoe');
 
// 检查是否包含某个键
var hasUsername = formData.has('username');
 
// 遍历所有键值对
for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
}

使用 FormData 对象可以简化发送表单数据和文件的过程，特别适合于异步请求（例如使用 XMLHttpRequest 或 fetch API）。

System

2024-08-15

所有,html5

uni-app是一个使用Vue.js开发跨平台应用的框架，目前支持编译到iOS、Android、H5、以及微信小程序等多个平台。

概述：
Uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一次代码，可编译到iOS、Android、H5、以及微信小程序等多个平台。
条件编译：
条件编译是Uni-app的一个重要特性，开发者可以通过条件编译为不同平台编译不同的代码。
App端Nvue开发：
Uni-app支持使用与Web相似的Vue语法进行App端的开发，并提供了类似于React Native的Nvue文件用于开发原生组件。
HTML5+：
HTML5+是一个轻量级的API集，可以让开发者使用HTML5语言调用手机的原生能力，如摄像头、地图、支付等。
开发环境搭建：
开发者需要安装Node.js和HBuilderX（官方IDE），然后通过HBuilderX创建和管理项目。
自定义组件：
开发者可以创建自定义组件，并通过条件编译为不同平台编译不同的组件。
配置：
配置文件是项目的核心部分，包括了项目的基本信息、平台特有的配置等。

以上是对uni-app的基本概述和关键特性的概要，具体使用时需要参考官方文档和API。

- 阅读更多 -

前端JS特效第15波：HTML5音乐播放器带歌词

System

2024-08-15

所有,html5

以下是一个简单的HTML5音乐播放器示例，它包括歌曲信息和歌词显示功能。




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 音乐播放器</title>
    <style>
        #audioPlayer {
            width: 400px;
            margin: auto;
            text-align: center;
        }
        #lyrics {
            width: 400px;
            margin: auto;
            text-align: center;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="audioPlayer">
        <audio id="song" controls preload="auto">
            <source src="your-song.mp3" type="audio/mp3">
            对不起，您的浏览器不支持 audio 元素。
        </audio>
        <div id="lyrics">
            歌词加载中...
        </div>
    </div>
 
    <script>
        window.onload = function() {
            var audio = document.getElementById('song');
            var lyrics = document.getElementById('lyrics');
            var currentLyrics = '';
            var nextLyrics = '';
            var lyricsArray = ['这里是歌词1', '这里是歌词2', '这里是歌词3']; // 歌词数组
            var currentTime = 0;
 
            // 更新歌词函数
            function updateLyrics() {
                currentLyrics = lyricsArray[currentTime].replace(/^\s+|\s+$/g, ''); // 去除空白字符
                nextLyrics = lyricsArray[currentTime + 1] ? lyricsArray[currentTime + 1].replace(/^\s+|\s+$/g, '') : '';
                if (audio.currentTime >= currentTime && audio.currentTime < nextLyrics.length ? nextLyrics : currentLyrics) {
                    lyrics.textContent = currentLyrics;
                }
            }
 
            // 监听时间更新事件
            audio.addEventListener('timeupdate', function() {
                // 每500毫秒检查一次歌词
                if (audio.currentTime % 5 === 0) {
                    currentTime = Math.floor(audio.currentTime);
                    updateLyrics();
                }
            });
 
            // 初始化歌词显示
            updateLyrics();
        };
    </script>
</body>
</html>

在这个示例中，我们首先定义了一个简单的HTML结构，其中包括一个audio元素和一个用于显示歌词的div。然后，我们使用JavaScript在页面加载完成时初始化音乐播放器。我们创建了一个更新歌词的函数updateLyrics，并且在timeupdate事件中调用它，以便在音乐播放时更新歌词。

注意：这个示例假设歌词数组lyricsArray已经按照对应的音乐时间点顺序填充了歌词。在实际应用中，歌词可能需要从外部文件加载，或者通过API获取。此外，歌词的同步可能需要更复杂的逻辑，例如考虑歌词的高亮显示、换行处理等。

- 阅读更多 -

在JS获取当前的时间，当前的时间戳转化为年月日时分秒

System

2024-08-15

所有,html5

在JavaScript中，获取当前时间可以使用 Date 对象，将 Date 对象转换为年月日时分秒可以使用 getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds() 方法。

以下是示例代码：




// 获取当前时间
const now = new Date();
 
// 获取年月日时分秒
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月份是从0开始的
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
 
// 输出格式化后的时间
console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
 
// 如果需要时间戳（单位：毫秒）
const timestamp = now.getTime();
console.log(timestamp);

注意：getMonth() 方法返回的月份值是从0到11的整数，因此在使用时需要加1来得到常规的月份表示。

- 阅读更多 -

vue+高德地图逆地理编码和设置marker

System

2024-08-15

所有,html5




<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 高德地图API
      const map = new AMap.Map('container', {
        zoom: 11,
        center: [116.397428, 39.90923] // 设置中心点坐标
      });
 
      // 点击地图任意位置设置标记点
      map.on('click', (e) => {
        // 清除已有的标记点
        map.clearMap();
        // 创建新的标记点
        const marker = new AMap.Marker({
          map: map,
          position: e.lnglat, // 设置标记点位置
        });
        // 显示标记点
        marker.setMap(map);
 
        // 逆地理编码
        const geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all',
        });
        geocoder.getAddress(e.lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              console.log(result.regeocode.formattedAddress); // 输出逆地理编码结果
            }
          }
        });
      });
    }
  }
}
</script>
 
<style>
#app {
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
</style>

这段代码首先在Vue组件的mounted钩子中初始化了高德地图，并在地图上设置了点击事件，用于在用户点击地图时设置一个新的标记点，并进行逆地理编码来获取点击位置的详细地址信息。

- 阅读更多 -

html鼠标放在按钮上变色

System

2024-08-15

所有,html5

要实现鼠标悬停在按钮上时按钮变色，可以使用CSS来完成。以下是一个简单的HTML和CSS示例：

HTML:




<button class="hover-button">Hover Over Me!</button>

CSS:




.hover-button {
  background-color: #4CAF50; /* 默认背景颜色 */
  color: white; /* 文字颜色 */
  padding: 15px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标光标变成手指形状 */
  transition: background-color 0.3s; /* 过渡效果 */
}
 
.hover-button:hover {
  background-color: #3e8e41; /* 鼠标悬停时的背景颜色 */
}

这段代码定义了一个带有悬停效果的按钮。当鼠标悬停在.hover-button类上时，按钮的背景颜色会平滑地变为#3e8e41。

- 阅读更多 -