标签 html5 下的文章

[HTML]Web前端开发技术5.2（HTMLCSSJavaScript ）CSS基础，decoration，selector，properties，Cascading——喵喵画网页

2024-08-14

在CSS中，text-decoration属性用于设置或获取对象文本的装饰。这种装饰通常是下划线、上划线、删除线等。

以下是一些使用text-decoration的示例：

为文本添加下划线：




p.decoration {
  text-decoration: underline;
}

为文本添加上划线：




p.decoration {
  text-decoration: overline;
}

为文本添加删除线：




p.decoration {
  text-decoration: line-through;
}

为文本同时添加上划线和下划线：




p.decoration {
  text-decoration: underline overline;
}

在CSS中，selector是用来选择你要添加样式的HTML元素。例如，如果你想要选择所有的<p>元素，并为它们添加上划线的样式，你可以这样做：




p {
  text-decoration: underline;
}

这段代码会使得所有<p>元素的文本都显示为带有下划线的文本。

在实际开发中，你可以根据需要选择合适的选择器，并结合text-decoration属性来为你的网页添加各种样式。

- 阅读更多 -

h5音乐播放器实现

System

2024-08-14

所有,ajax

HTML5 提供了一个内置的 <audio> 标签，可以用来创建简单的音频播放器。以下是一个基本的 HTML5 音频播放器实现示例：




<!DOCTYPE html>
<html>
<body>
 
<audio id="myAudio" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<script>
// 获取 audio 元素
var myAudio = document.getElementById("myAudio");
 
// 播放按钮点击事件
function playAudio() {
  myAudio.play();
}
 
// 暂停按钮点击事件
function pauseAudio() {
  myAudio.pause();
}
</script>
 
<button onclick="playAudio()">播放音乐</button>
<button onclick="pauseAudio()">暂停音乐</button>
 
</body>
</html>

在这个例子中，<audio> 标签有一个 controls 属性，它会为音频播放器提供默认的播放控件。你也可以通过 JavaScript 访问和控制 <audio> 元素的各种属性和方法，如 play() 和 pause() 来实现更复杂的播放器功能。

请将 "your-audio-file.mp3" 替换为你的音频文件路径。如果你的音频文件是其他格式，比如 OGG 或 WAV，你可以添加额外的 <source> 标签来指定它们，浏览器会自动选择支持的格式播放音频。

System

2024-08-14

所有,vue.js




// manifest.json 中配置代理
{
  ...
  "h5" : {
    "devServer" : {
      "port": 8080,
      "proxy" : {
        "/api": {
          "target": "http://backend.example.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
  ...
}




// vue.config.js 中配置代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

以上代码示例展示了如何在manifest.json和vue.config.js中配置代理，使得在开发环境下运行的UniApp项目可以通过代理服务器访问不同域的后端API。这有助于解决开发过程中的跨域问题，并允许开发者在本地进行调试。

- 阅读更多 -

iframe 与 h5 或其他vue页面传值，详解传递参数的方法和技巧

System

2024-08-14

所有,vue.js

在Vue中，iframe与父页面（H5或其他Vue页面）传值可以通过几种方式实现：

通过window.postMessage方法

window.postMessage是一个安全的跨文档消息传送API，可以实现跨文档、多窗口通信。

父页面发送消息给iframe：




const iframeWindow = this.$refs.myIframe.contentWindow;
iframeWindow.postMessage({ msg: 'Hello, I am from parent' }, '*');

iframe内接收消息：




window.addEventListener('message', (event) => {
  if (event.origin !== window.location.origin) return;
  console.log(event.data.msg); // 输出：Hello, I am from parent
});

通过window.parent属性
在iframe内部可以通过window.parent访问父页面的window对象，并可以访问父页面定义的全局变量或函数。
父页面定义全局函数：
```
window.receiveMessageFromIframe = function(msg) {
  console.log(msg); // 输出：Hello, I am from iframe
};
```
iframe内调用父页面函数：
```
window.parent.receiveMessageFromIframe('Hello, I am from iframe');
```

通过URL参数

如果要传递的数据量不大，可以通过修改iframe的src属性来传递参数。

父页面设置iframe的src：




<iframe :src="iframeUrl"></iframe>




data() {
  return {
    iframeUrl: 'http://example.com/iframe.html?param=value'
  };
}

iframe内部通过URLSearchParams或正则匹配获取参数：




const params = new URLSearchParams(window.location.search);
const paramValue = params.get('param'); // 输出：value

以上方法可以实现iframe与父页面的通信，但请注意安全性，例如防止跨站点脚本攻击（XSS）。

- 阅读更多 -

编程笔记 html5&css&js 038 CSS背景

System

2024-08-13

所有,html5

在HTML和CSS中，可以使用背景图像、颜色或渐变来装饰网页。以下是一些示例：

使用背景颜色：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-color"></div>
</body>
</html>

CSS (styles.css):




.background-color {
    width: 100%;
    height: 100vh;
    background-color: #ff0000; /* 红色背景 */
}

使用背景图像：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-image"></div>
</body>
</html>

CSS (styles.css):




.background-image {
    width: 100%;
    height: 100vh;
    background-image: url('background.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
}

使用背景渐变：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-gradient"></div>
</body>
</html>

CSS (styles.css):




.background-gradient {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #ff0000, #00ff00); /* 从左到右的红到绿渐变 */
}

以上代码示例展示了如何在HTML元素上设置背景样式。在实际应用中，可以根据需要选择使用背景颜色、图像或渐变。

System

2024-08-13

所有,html5

在JavaScript中，Number类型用于表示数字值。JavaScript Number 类型的值可以是整数或者浮点数，并且可以用科学计数法表示。

以下是一些操作JavaScript Number数据类型的示例代码：

创建一个Number类型的变量并赋值：




let num = 10; // 整数
let floatNum = 10.5; // 浮点数
let bigNum = 99999999999999; // 大数字

使用Number对象创建数字：




let numObj = new Number(10);

使用Number函数将其他数据类型转换为数字：




let stringToNum = Number("123"); // 123
let boolToNum = Number(true); // 1
let objectToNum = Number({}); // NaN

使用特殊的Number值：




let infinity = Number.POSITIVE_INFINITY; // 正无穷大
let negInfinity = Number.NEGATIVE_INFINITY; // 负无穷大
let nan = Number.NaN; // 非数字

使用Number对象的方法：




let num = 10;
let stringNum = num.toString(); // "10"
let numToFixed = num.toFixed(2); // "10.00"
let numToPrecision = num.toPrecision(2); // "1e+01"

使用Number的静态方法：




let stringToNum = Number.parseInt("123abc"); // 123
let floatToNum = Number.parseFloat("123.45abc"); // 123.45

使用Number的比较方法：




let num1 = 10;
let num2 = 20;
let maxNum = Math.max(num1, num2); // 20
let minNum = Math.min(num1, num2); // 10

以上代码展示了如何在JavaScript中使用Number类型的基本操作。

- 阅读更多 -

uni-app H5使用flv.js直播拉流

System

2024-08-13

所有,html5

要在uni-app中使用flv.js进行H5直播拉流，你需要按照以下步骤操作：

在项目中引入flv.js。
创建一个video元素来展示视频流。
使用flv.js创建一个MediaDataSource实例来接收视频流。
将MediaDataSource实例绑定到video元素上。

以下是具体的实现代码：

首先，在项目中安装flv.js：




npm install flv.js --save

然后，在你的页面的<script>部分，编写代码来初始化flv.js并播放视频流：




// 引入flv.js
import flvjs from 'flv.js';
 
export default {
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.createPlayer();
  },
  methods: {
    createPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement;
        this.player = flvjs.createPlayer({
          type: 'media',
          url: '你的flv流地址',
        });
        this.player.attachMediaElement(videoElement);
        this.player.load();
        this.player.play();
      }
    },
    destroyPlayer() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    }
  },
  beforeDestroy() {
    this.destroyPlayer();
  }
};

在你的页面的<template>部分，添加video元素：




<template>
  <view>
    <video ref="videoElement" controls autoplay width="100%" height="auto"></video>
  </view>
</template>

确保你的flv流地址是可以正确访问的。这样就可以在H5中使用flv.js来进行直播拉流了。

- 阅读更多 -

HTML5 WEB 存储

System

2024-08-13

所有,html5

在HTML5中，Web Storage提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。

localStorage

localStorage是HTML5新增的一个在本地保存数据的功能，用于长久保存整个网站的数据，保存的数据没有时间限制。可以手动删除数据。




<!DOCTYPE html>
<html>
<body>
 
<h2>Local Storage</h2>
 
<p>Click the button to set a local storage item.</p>
 
<button onclick="setLocalStorage()">Set Local Storage Item</button>
 
<button onclick="getLocalStorage()">Get Local Storage Item</button>
 
<button onclick="removeLocalStorage()">Remove Local Storage Item</button>
 
<button onclick="clearLocalStorage()">Clear Local Storage</button>
 
<p id="demo"></p>
 
<script>
function setLocalStorage() {
    localStorage.setItem("key", "value");
}
 
function getLocalStorage() {
    var value = localStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeLocalStorage() {
    localStorage.removeItem("key");
}
 
function clearLocalStorage() {
    localStorage.clear();
}
</script>
 
</body>
</html>

sessionStorage

sessionStorage也是HTML5新增的一个在本地保存数据的功能，但是它和localStorage不同，它只是在当前会话中保存数据，关闭页面就会消失。




<!DOCTYPE html>
<html>
<body>
 
<h2>Session Storage</h2>
 
<p>Click the button to set a session storage item.</p>
 
<button onclick="setSessionStorage()">Set Session Storage Item</button>
 
<button onclick="getSessionStorage()">Get Session Storage Item</button>
 
<button onclick="removeSessionStorage()">Remove Session Storage Item</button>
 
<button onclick="clearSessionStorage()">Clear Session Storage</button>
 
<p id="demo"></p>
 
<script>
function setSessionStorage() {
    sessionStorage.setItem("key", "value");
}
 
function getSessionStorage() {
    var value = sessionStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeSessionStorage() {
    sessionStorage.removeItem("key");
}
 
function clearSessionStorage() {
    sessionStorage.clear();
}
</script>
 
</body>
</html>

以上代码展示了如何使用localStorage和sessionStorage进行数据的存储、读取、删除和清除。

注意：localStorage和sessionStorage中存储的数据都是以字符串的形式进行存储的，如果要存储对象，需要使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。

- 阅读更多 -

HTML5与Java交互：实现动态Web应用的完美融合

System

2024-08-13

所有,html5

在HTML5与Java（应为JavaScript）进行交互时，可以通过以下方式实现动态Web应用：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5与JavaScript交互示例</title>
    <script>
        function showMessage() {
            var message = document.getElementById('message');
            message.textContent = 'Hello, World!';
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">点击我</button>
    <p id="message">等待消息...</p>
</body>
</html>

在这个例子中，我们定义了一个名为showMessage的JavaScript函数，该函数通过ID获取段落元素，并将其文本内容设置为"Hello, World!"。当用户点击按钮时，会触发onclick事件，进而调用showMessage函数，实现与用户的交互。这是一个简单的示例，但展示了如何通过HTML5和JavaScript创建动态的Web应用。

- 阅读更多 -

HTML5本地存储使用详解

System

2024-08-13

所有,html5

HTML5提供了一个本地存储的解决方案，可以在客户端本地存储数据。这些数据不会随着HTTP请求发送到服务器，而是仅仅保存在客户端。

HTML5本地存储的两种方式：

localStorage：用于长久保存整个网站的数据，保存的数据没有时间限制。
sessionStorage：用于临时保存某个会话的数据，关闭页面或浏览器时数据会被清除。

以下是使用localStorage的一个例子：




<!DOCTYPE html>
<html>
<body>
 
<h2>LocalStorage Test</h2>
 
<div id="data">
  <p>Name: <input type="text" id="name" size="20"></p>
  <p>Age: <input type="text" id="age" size="20"></p>
  <input type="button" onclick="saveStorage()" value="Save">
</div>
 
<script>
function saveStorage() {
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  
  localStorage.setItem('name', name);
  localStorage.setItem('age', age);
  
  var data = "<p>Name: " + localStorage.getItem('name') + 
             "<p>Age: " + localStorage.getItem('age');
  
  document.getElementById('data').innerHTML = data;
}
 
window.onload = function() {
  if (localStorage.getItem('name')) {
    document.getElementById('name').value = localStorage.getItem('name');
    document.getElementById('age').value = localStorage.getItem('age');
  }
};
</script>
 
</body>
</html>

在这个例子中，我们创建了一个简单的表单，用户可以在输入框中输入姓名和年龄。当用户点击"Save"按钮时，这些数据会被保存到localStorage中。当页面加载时，如果localStorage中存有数据，则会把数据填充到表单中。

注意：localStorage中只能存储字符串。如果要存储对象，需要使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。

- 阅读更多 -