分类前端技术下的文章

2024-08-07




<template>
  <div class="rich-editor">
    <vue-editor v-model="content"></vue-editor>
    <button @click="printTemplate">打印模板</button>
  </div>
</template>
 
<script>
import VueEditor from "vue2-editor";
import htmlToPdfmake from "html-to-pdfmake";
 
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      content: "<h1>这是一个富文本编辑器的内容</h1>"
    };
  },
  methods: {
    printTemplate() {
      const pdfmakeDefinition = htmlToPdfmake(this.content);
      // 这里可以使用 pdfmake 库将定义转换为 PDF
      // 示例代码（需要安装 pdfmake 和 vfs 库）:
      // const pdfmake = require('pdfmake/build/pdfmake');
      // const vfs = require('pdfmake/build/vfs_fonts');
      // pdfmake.vfs = vfs.pdfMake.vfs;
      // pdfmake.createPdf(pdfmakeDefinition).open();
    }
  }
};
</script>
 
<style>
.rich-editor {
  /* 样式内容 */
}
</style>

这个代码示例展示了如何在Vue应用中集成富文本编辑器，并提供了一个按钮用于将编辑器内容转换成PDF格式。需要注意的是，html-to-pdfmake库用于将HTML内容转换为pdfmake可以理解的JSON结构，但实际转换PDF的工作需要使用pdfmake库来完成。在实际应用中，你需要安装这两个库，并在printTemplate方法中完成PDF的生成和打开工作。

- 阅读更多 -

uniapp添加操作日志（uniapp、日志、文件、html5+）

System

2024-08-07

所有,html5

在uniapp中添加操作日志通常涉及到文件写入。以下是一个简单的示例，展示了如何在uniapp中记录操作日志到文件：




export default {
  methods: {
    // 记录日志函数
    logAction(message) {
      const logEntry = `${new Date().toISOString()}: ${message}\n`;
      // 在uni-app环境下，可以使用plus.io的API来写文件
      plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
        // 创建或打开日志文件
        fs.root.getFile("action_log.txt", { create: true }, function(fileEntry) {
          fileEntry.createWriter(function(writer) {
            writer.onwrite = function() {
              console.log('日志写入成功');
            };
            writer.onerror = function(e) {
              console.log('日志写入失败: ' + e.message);
            };
            // 追加日志内容
            writer.seek(writer.length);
            writer.write(logEntry);
          }, function(e) {
            console.log('创建写入器失败: ' + e.message);
          });
        }, function(e) {
          console.log('获取文件失败: ' + e.message);
        });
      }, function(e) {
        console.log('请求文件系统失败: ' + e.message);
      });
    }
  }
}

在上述代码中，logAction方法负责将日志信息追加到文件。请注意，这段代码需要在真机上运行，因为plus.io API是HTML5+ API的一部分，只有在支持HTML5+的环境下（如uniapp打包成App时）才能正常工作。在使用之前，请确保已经在manifest配置文件中开启了对应的权限。

- 阅读更多 -

el-button的disabled属性动态绑定data数据

System

2024-08-07

所有,html5

在Vue中，可以使用v-bind或简写为:来动态绑定el-button的disabled属性到组件的数据属性上。以下是一个简单的例子：




<template>
  <el-button :disabled="isButtonDisabled">按钮</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      isButtonDisabled: false
    };
  },
  methods: {
    toggleButton() {
      this.isButtonDisabled = !this.isButtonDisabled;
    }
  }
};
</script>

在这个例子中，isButtonDisabled是一个数据属性，它的值可以是true或false。el-button的disabled属性被绑定到isButtonDisabled上，使其根据isButtonDisabled的值来启用或禁用按钮。你可以通过调用toggleButton方法来改变isButtonDisabled的值，从而动态地启用或禁用按钮。

- 阅读更多 -

HTML5技术实现的小钢琴

System

2024-08-07

所有,html5

HTML5 本身并不提供直接创建小钢琴的接口，但可以使用 <audio> 标签来播放音乐，并结合 JavaScript 代码来实现简单的钢琴控制。以下是一个简单的 HTML5 小钢琴实现示例：




<!DOCTYPE html>
<html>
<head>
<title>HTML5 Guitar Tuner</title>
<script>
// 初始化音频上下文
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
// 音符对应的音频文件路径
var notes = {
  'A': 'sounds/A3.mp3',
  'B': 'sounds/B3.mp3',
  'C': 'sounds/C3.mp3',
  // ... 其他音符
};
 
// 根据按键创建音频节点并连接到音频上下文
function playNote(note) {
  var audio = new Audio(notes[note]);
  var source = audioCtx.createMediaElementSource(audio);
  source.connect(audioCtx.destination);
  audio.play();
}
 
// 用户交互函数
function keyPress(note) {
  playNote(note);
  // 可以添加更多的视觉反馈，如改变键的颜色等
}
</script>
<style>
/* 键的样式 */
.key {
  /* 省略样式代码 */
}
</style>
</head>
<body>
<div id="keyboard">
  <div class="key" onclick="keyPress('A')">A</div>
  <div class="key" onclick="keyPress('B')">B</div>
  <div class="key" onclick="keyPress('C')">C</div>
  <!-- 更多键 -->
</div>
</body>
</html>

在这个例子中，我们使用了 <audio> 标签和 AudioContext 来播放音频。通过为每个键分配一个点击事件处理函数 keyPress，当用户点击一个键时，相应的音乐会被播放。这个简单的实现没有包括复杂的音高识别或调音功能，仅适用于播放预存的音频文件。

请注意，为了使这段代码工作，你需要有对应音频文件，并且它们的路径需要正确填写在 notes 对象中。此外，音频文件需要是浏览器支持的格式，并且要确保服务器正确配置了CORS以允许跨域加载。

System

2024-08-07

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>Server-Sent Events Demo</title>
    <script type="text/javascript">
        if(typeof(EventSource) !== "undefined") {
            var source = new EventSource("sse_stream.php");
            source.onmessage = function(event) {
                document.getElementById("result").innerHTML += event.data + "<br>";
            };
            source.onerror = function(event) {
                console.error("EventSource failed.");
            };
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
        }
    </script>
</head>
<body>
    <div id="result"></div>
</body>
</html>

在这个例子中，我们首先检查浏览器是否支持EventSource。如果支持，我们创建一个新的EventSource对象，指向名为sse_stream.php的服务端脚本。每当服务器有新消息发送时，onmessage事件会触发，并将数据添加到页面的result元素中。如果发生错误，onerror事件会被触发，并在控制台中记录错误信息。如果浏览器不支持SSE，则会在页面上显示一条消息。

- 阅读更多 -

jQuery 在图片和文字中插入内容（多种情况考虑）

System

2024-08-07

所有,jquery

在jQuery中，您可以使用.before(), .after(), .prepend(), 和 .append() 方法来在图片和文本元素之前、之后、内部的前面或内部的后面插入内容。以下是一些示例：




<!-- 示例HTML结构 -->
<div id="content">
    <img src="image.jpg" alt="示例图片" />
    <p>这是一段示例文本。</p>
</div>




// jQuery插入内容示例
$(document).ready(function() {
    // 在图片前插入内容
    $('#content img').before('<span>前缀文本</span>');
 
    // 在文本后插入内容
    $('#content p').after('<span>后缀文本</span>');
 
    // 在图片内部的前面插入内容
    $('#content img').prepend('<span>内部前缀文本</span>');
 
    // 在文本内部的后面插入内容
    $('#content p').append('<span>内部后缀文本</span>');
});

在上述代码中，我们选择了页面上的图片和段落，并使用相应的方法在它们之前、之后、内部的前面或内部的后面插入了<span>元素。这些操作可以根据您的具体需求进行调整。

- 阅读更多 -

jQuery之标签的属性操作

System

2024-08-07

所有,jquery

在jQuery中，可以使用.attr()方法来获取或设置元素的属性。如果想要设置属性，可以传入两个参数（属性名和属性值）给.attr()方法。如果想要获取属性，则只需传入一个参数（属性名）。

以下是一些使用.attr()方法的示例：




// 设置元素的href属性
$('a').attr('href', 'http://www.example.com');
 
// 获取元素的href属性
var hrefValue = $('a').attr('href');
 
// 设置多个属性
$('img').attr({
  'src': 'image.jpg',
  'alt': '图片描述'
});
 
// 删除属性
$('a').removeAttr('href');

在这些例子中，$('a')选择了页面上所有的<a>元素，然后分别对它们的href属性进行了设置、获取、设置多个属性和移除操作。

- 阅读更多 -

jQuery值操作例子

System

2024-08-07

所有,jquery




// 确保DOM完全加载
$(document).ready(function() {
    // 获取选中checkbox的值
    var checkedValues = [];
    $('input[type=checkbox]:checked').each(function() {
        checkedValues.push($(this).val());
    });
    console.log(checkedValues); // 打印选中的checkbox的值
 
    // 设置input元素的值
    $('#myInput').val('这是新值');
 
    // 获取下拉列表选中项的文本
    var selectedText = $('#mySelect option:selected').text();
    console.log(selectedText); // 打印选中的下拉列表选项的文本
});

这段代码首先确保DOM完全加载后执行。然后，它获取所有选中的checkbox的值，并将它们存储在一个数组中。接着，它设置一个input元素的值。最后，它获取选中的下拉列表的选项文本，并打印到控制台。这些操作都是基于jQuery库的，它们演示了如何使用jQuery来处理表单元素的值。

2024-08-07

要为网站的鼠标点击事件添加富强多样的内容，可以使用JavaScript来动态地向页面元素添加事件监听器。以下是一个简单的例子，它在用户点击页面时添加一段富含的内容：




// 为document添加click事件监听器
document.addEventListener('click', function(event) {
    // 创建一个新的div元素
    var newDiv = document.createElement('div');
    // 设置div的内容
    newDiv.innerHTML = '<h1>富强多样的内容</h1>' +
                       '<p>这是随机生成的内容，可以是图片、视频、链接等等。</p>' +
                       '<img src="https://placekitten.com/200/200" alt="一只小猫">';
    // 将新div添加到body中
    document.body.appendChild(newDiv);
 
    // 如果需要阻止进一步的点击事件处理，可以调用event.stopPropagation()
    // event.stopPropagation();
});

这段代码会在用户每次点击页面时，在body中动态添加一个包含文本和图片的新div元素。如果你想要添加更多的内容，比如视频或者其他富媒体，只需要修改newDiv.innerHTML中的内容即可。

请注意，在实际的生产环境中，你可能需要对生成的内容进行更多的错误处理和安全性检查，以确保用户体验和网站的安全。

- 阅读更多 -

JQuery 基本使用，【推荐】，重难点整理

System

2024-08-07

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 基础示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 当按钮被点击时，改变段落的文本
            $('#myButton').click(function() {
                $('#myPara').text('jQuery 功能强大！');
            });
        });
    </script>
</head>
<body>
 
    <button id="myButton">点击我</button>
    <p id="myPara">这是一个段落。</p>
 
</body>
</html>

这个示例展示了如何在HTML文档中使用jQuery库来响应按钮点击事件。当用户点击按钮时，jQuery会改变指定段落的文本内容。这是学习jQuery的基础，并且展示了如何将事件处理器绑定到DOM元素上。

- 阅读更多 -