分类 html 下的文章

2024-08-17




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Copy Functions</title>
    <script>
        function copyTextToClipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.value = text;
            
            // 防止元素显示在屏幕上
            textArea.style.position = "fixed";
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.width = "2em";
            textArea.style.height = "2em";
            textArea.style.padding = "0";
            textArea.style.border = "none";
            textArea.style.outline = "none";
            textArea.style.boxShadow = "none";
            textArea.style.background = "transparent";
            
            document.body.appendChild(textArea);
            textArea.select();
            
            try {
                var successful = document.execCommand('copy');
                var msg = successful ? 'successful' : 'unsuccessful';
                console.log('Copy text command was ' + msg);
            } catch (err) {
                console.error('Oops, unable to copy', err);
            }
            
            document.body.removeChild(textArea);
        }
        
        function copyHTMLToClipboard(html) {
            var tempDiv = document.createElement("div");
            tempDiv.innerHTML = html;
            var selection = window.getSelection();
            var range = document.createRange();
            window.getSelection().removeAllRanges();
            range.selectNodeContents(tempDiv);
            selection.addRange(range);
            var successful = document.execCommand('copy');
            selection.removeAllRanges();
            tempDiv.parentNode.removeChild(tempDiv);
            console.log('Copy HTML command was ' + (successful ? 'successful' : 'unsuccessful'));
        }
        
        function downloadImage(href) {
            var image = new Image();
            image.src = href;
            image.crossOrigin = 'Anonymous';
            image.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, image.width, image.height);
                var dataURL = canvas.toD

- 阅读更多 -

如何在一个传统的html中，引入vueJs并使用vue复制组件？

System

2024-08-17

所有,html

要在传统的HTML中引入Vue.js并使用组件，你需要按照以下步骤操作：

在HTML文件中通过<script>标签引入Vue.js。
创建一个Vue组件。
在Vue实例中注册该组件，并使用它。

下面是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>Vue Component Example</title>
</head>
<body>
    <div id="app">
        <!-- 使用my-component组件 -->
        <my-component></my-component>
    </div>
 
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    
    <!-- Vue组件定义 -->
    <script type="text/x-template" id="my-component-template">
        <div>
            <h1>Hello, Vue Component!</h1>
        </div>
    </script>
 
    <script>
        // 创建Vue组件
        Vue.component('my-component', {
            template: '#my-component-template'
        });
 
        // 创建Vue实例
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

在这个例子中，我们通过script标签引入了Vue.js，然后定义了一个简单的Vue组件，并在Vue实例中注册了它。最后，在HTML中通过自定义元素 <my-component></my-component> 使用了这个组件。

- 阅读更多 -

html实现好看的多种风格导航菜单

System

2024-08-17

所有,html

以下是一个使用HTML和CSS创建的简单好看的多样式导航菜单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Style Navigation Menu</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .navigation {
    background-color: #333;
    overflow: hidden;
  }
  .navigation a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navigation a:hover {
    background-color: #ddd;
    color: black;
  }
  .navigation a.active {
    background-color: #4CAF50;
  }
</style>
</head>
<body>
 
<div class="navigation">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
 
<h2>Content goes here</h2>
 
</body>
</html>

这段代码展示了如何使用HTML创建一个基本的导航菜单，并使用CSS为其设置样式。.navigation 类用于设置导航栏的背景色和其他属性，而 .navigation a 用于设置导航链接的样式，比如颜色、padding等。悬停效果和激活状态的样式也被定义了。这是一个简单且实用的导航菜单示例，可以根据需要进行样式定制和功能扩展。

System

2024-08-17

所有,html




<template>
  <div>
    <DxGantt
      :tasks="tasks"
      :dependencies="dependencies"
      :resourceAssignments="resourceAssignments"
      :resources="resources"
      :columns="columns"
      :rootTaskId="1"
      :taskTitlePosition="'inside'"
      :showResources="true"
      :showRowLines="true"
      :scaleType="'minutes'"
      :editing="editing"
      :validation="validation"
      @taskUpdated="onTaskUpdated"
      @taskMoving="onTaskMoving"
    >
      <DxBar
        :items="toolbarItems"
        :location="'before'"
      />
      <DxSelectionSettings
        :showCheckBoxesMode="'onClick'"
      />
      <DxScaleTypeRangeSettings
        :min="minScale"
        :max="maxScale"
        :scaleType="'minutes'"
      />
      <DxExport :enabled="true" />
    </DxGantt>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  DxGantt,
  DxBar,
  DxSelectionSettings,
  DxScaleTypeRangeSettings,
  DxExport,
} from 'devextreme-vue/gantt';
import 'devextreme/ui/gantt';
import 'devextreme/ui/toolbar';
 
export default defineComponent({
  components: {
    DxGantt,
    DxBar,
    DxSelectionSettings,
    DxScaleTypeRangeSettings,
    DxExport,
  },
  setup() {
    const tasks = ref([{
      id: 1,
      title: 'Project',
      start: '2020-01-01T08:00:00',
      end: '2020-01-02T09:00:00',
      progress: 0.6,
    }]);
    const dependencies = ref([]);
    const resourceAssignments = ref([]);
    const resources = ref([]);
    const columns = ref([]);
    const editing = ref({});
    const validation = ref({});
    const toolbarItems = ref([
      'undo',
      'redo',
      'separator',
      {
        widget: 'dxButton',
        location: 'before',
        options: {
          text: 'Custom',
          onClick: () => alert('Custom button clicked'),
        },
      },
    ]);
    const minScale = ref('minutes');
    const maxScale = ref('months');
 
    const onTaskUpdated = (e) => {
      // 自定义任务更新逻辑
    };
    const onTaskMoving = (e) => {
      // 自定义任务移动逻辑
    };
 
    return {
      tasks,
      dependencies,
      resourceAssignments,
      resources

- 阅读更多 -

html中使用vue3（清晰易懂）

System

2024-08-17

所有,html

在HTML中使用Vue 3，你需要引入Vue的CDN链接，并在HTML文件中编写Vue代码。以下是一个简单的HTML示例，展示了如何使用Vue 3：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Example</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
      {{ message }}
    </div>
 
    <script>
      Vue.createApp({
        data() {
          return {
            message: 'Hello Vue 3!'
          }
        }
      }).mount('#app');
    </script>
</body>
</html>

在这个例子中，我们通过script标签引入了Vue 3的CDN链接。然后，我们创建了一个新的Vue应用程序，并将其挂载到页面上ID为app的元素上。在{{ message }}中，我们使用了Vue的插值表达式来显示数据属性message的值。当页面加载时，"Hello Vue 3!"将显示在相应的位置。

2024-08-17

在HTML中，可以通过设置<textarea>或<input type="text">的resize属性为vertical或horizontal或both来禁止用户手动调整文本域的大小。但是，这种方法并不是所有浏览器都支持。

一个更通用的方法是通过CSS来隐藏滚动条，并设置固定的高度和宽度。这样用户就无法通过拖动滚动条来改变文本域的大小。

以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止拖动文本域</title>
<style>
    /* 针对textarea的样式 */
    textarea {
        width: 300px;        /* 设置固定宽度 */
        height: 100px;       /* 设置固定高度 */
        resize: none;        /* 禁止用户调整大小 */
        overflow: hidden;    /* 隐藏滚动条 */
    }
</style>
</head>
<body>
<textarea rows="4" cols="50">这是一个不能手动拖动的文本域。</textarea>
</body>
</html>

在这个示例中，textarea的resize属性被设置为none，这禁止用户通过拖动文本域的右下角来调整其大小。同时，overflow属性被设置为hidden，这隐藏了滚动条，使得用户不能通过滚动来查看不在视图中的文本。通过固定width和height，文本域的大小也被固定住了。

- 阅读更多 -

Html —— 表白弹幕特效（效果，已开源

System

2024-08-17

所有,html

在HTML中创建一个表白弹幕特效，可以使用JavaScript和CSS来实现。以下是一个简单的实现示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message</title>
<style>
  #loveMessage {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: all 0.5s ease;
  }
  #loveMessage.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div id="loveMessage">
  他/她喜欢你！
</div>
 
<script>
  // 设置一个随机的几率来显示弹幕，例如50%
  const showProbability = 0.5;
  const loveMessage = document.getElementById('loveMessage');
 
  // 显示弹幕的函数
  function showLoveMessage() {
    loveMessage.classList.add('active');
    // 延迟关闭弹幕，可以根据需要调整时间
    setTimeout(() => loveMessage.classList.remove('active'), 5000);
  }
 
  // 判断是否显示弹幕
  if (Math.random() < showProbability) {
    showLoveMessage();
  }
</script>
 
</body>
</html>

这段代码实现了一个随机弹幕，当页面加载时，如果随机数小于设定的显示概率，则弹幕会随机显示。弹幕会在一段时间后自动消失。CSS用于制作弹幕的样式，JavaScript用于控制弹幕的显示和隐藏。弹幕的内容和显示概率可以根据需要进行自定义。

html写一个登录注册页面

2024-08-17

😩抱歉，出了点小问题，请稍后重试

数据可视化-ECharts Html项目实战

System

2024-08-17

所有,html




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
 
        function renderChart(option) {
            myChart.setOption(option, true);
        }
 
        app.init = function () {
            option = {
                // ECharts 图表配置项
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '直达'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            renderChart(option);
        };
 
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的饼图，使用了ECharts的基础配置项来展示数据。在实际项目中，你可以根据需要调整图表类型、数据和配置项来满足不同的可视化需求。

- 阅读更多 -

HTML跳动的爱心

System

2024-08-17

所有,html

要创建HTML跳动的爱心，可以使用CSS3动画来实现。以下是一个简单的示例：

HTML:




<div class="heart">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

CSS:




.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  animation: beat 0.8s infinite;
}
 
.heart .top {
  position: absolute;
  top: 0;
  left: 50px;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
 
.heart .bottom {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 0 0 50px 50px;
}
 
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

这段代码定义了一个心形结构，使用CSS动画@keyframes beat来实现跳动效果。通过调整transform: scale(1.1)的比例，可以使心跳动的更大。

- 阅读更多 -