vue引用js html页面 vue引用js动态效果

news2024/11/15 10:07:54

要引用的index.html页面:(资源来自网络)在pubilc下建一个static文件放入js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数字翻转</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        name="viewport" />
    <style>
        body {
            min-height: 60vh;
            background: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .content-item {
            width: 36px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 22px;
            font-family: PangMenZhengDao;
            font-weight: bold;
            color: #12F6FE;
            background: rgba(11, 51, 107, 0);
            border: 1px solid #00FFF6;
        }

        .content-item+.content-item {
            margin-left: 4px;
        }
    </style>
    <link rel="stylesheet" href="./rollNumber/index.css">
</head>

<body>

    <div id="rollNumberList" class="content">
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
        <div class="content-item">0</div>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./rollNumber/index.js"></script>
    <script>
        let num = 300
        let update = $("#rollNumberList").rollNumber({ num })
        setInterval(() => {
            update(num += Math.floor(Math.random() * (4000 - 3000) + 3000))
        }, 3000)
    </script>
</body>

</html>

vue页面:运行项目打开此路径就可以看到效果了

<template>
  <div class="echarts">
    
    <iframe :src="src1" frameborder="0" style="width:100%;height:100vh"></iframe>
  
  </div>
</template>
<script>
export default {
  data() {
    return {

      src1: "/static/index.html",

    };
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .echarts{
    position: absolute;
    height: 100vh;
    width: 100%;
  }
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1939718.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot+Vue的校园志愿者管理系统(带1w+文档)

基于SpringBootVue的校园志愿者管理系统(带1w文档) 基于SpringBootVue的校园志愿者管理系统(带1w文档) 本次设计任务是要设计一个校园志愿者管理系统&#xff0c;通过这个系统能够满足管理员和志愿者的校园志愿者信息管理功能。系统的主要功能包括首页、个人中心、志愿者管理、…

多线程应用

并发与并行 计算机操作系统对于并发性和并行性的概念给出的定义是&#xff1a; 并行性是指两个或多个事件在同一时刻发生&#xff1b; 并发性是指两个或多个事件在同一时间段内发生。 并发是指多个任务(线程)都请求运行&#xff0c;如果系统只有一个CPU,CPU只能按受一个任务&…

java学习--断点调试

可进入调用的方法里看源码

C2W2.Assignment.Parts-of-Speech Tagging (POS).Part1

理论课&#xff1a;C2W2.Part-of-Speech (POS) Tagging and Hidden Markov Models 文章目录 0 Data Sources1 POS Tagging1.1 TrainingTransition countsEmission countsTag countsExercise 01 1.2 TestingExercise 02 理论课&#xff1a; C2W2.Part-of-Speech (POS) Tagging…

创建自己的 app: html网页直接打包成app;在线网页打包app工具fusionapp、pake

1、html网页直接打包成app 主要通过hbuilderx框架工具来进行打包 https://www.dcloud.io/hbuilderx.html 参考&#xff1a; https://www.bilibili.com/video/BV1XG411r7QZ/ https://www.bilibili.com/video/BV1ZJ411W7Na 1&#xff09;网页制作 这里做的工具是TodoList 页面&a…

数据结构——栈的实现(java实现)与相应的oj题

文章目录 一 栈栈的概念:栈的实现&#xff1a;栈的数组实现默认构造方法压栈获取栈元素的个数出栈获取栈顶元素判断当前栈是否为空 java提供的Stack类Stack实现的接口&#xff1a; LinkedList也可以当Stack使用虚拟机栈&#xff0c;栈帧&#xff0c;栈的三个概念 二 栈的一些算…

Android 11 HAL层集成FFMPEG

1.集成目录&#xff1a; android/vendor/noch/common/external/NoboMediaCodec 2.文件夹目录 3. Android.mk实现 # Copyright #LOCAL_PATH : $(call my-dir)SF_COMMON_MK : $(LOCAL_PATH)/common.mkinclude $(call first-makefiles-under,$(LOCAL_PATH))4.common.mk实现 # #…

Xilinx FPGA DDR4 接口配置基础(PG150)

1. 简介 1.1 DDR4 SDRAM 控制器主要特点 支持8到80位接口宽度的组件&#xff08;支持 RDIMM、LRDIMM、UDIMM 和 SODIMM&#xff09; 最大组件限制为9&#xff0c;此限制仅适用于组件&#xff0c;不适用于 DIMM。密度支持 最高支持 32 GB 的组件密度&#xff0c;64 GB 的 LRDI…

初识godot游戏引擎并安装

简介 Godot是一款自由开源、由社区驱动的2D和3D游戏引擎。游戏开发虽复杂&#xff0c;却蕴含一定的通用规律&#xff0c;正是为了简化这些通用化的工作&#xff0c;游戏引擎应运而生。Godot引擎作为一款功能丰富的跨平台游戏引擎&#xff0c;通过统一的界面支持创建2D和3D游戏。…

数字集成电路(3)

光刻&#xff08;photolithography&#xff09; 工艺步骤&#xff1a; 扩散和离子注入&#xff1a;900~1100℃ 淀积 刻蚀 平面化 衬底选择&#xff1a;常用&#xff08;100&#xff09;晶面&#xff08;原因&#xff1a;面密度小&#xff0c;界面态少&#xff09; 设计规…

【vue教程】四. Vue 计算属性和侦听器

目录 本章涵盖知识点回顾计算属性&#xff08;Computed&#xff09;创建计算属性计算属性的多样性计算属性的数组过滤计算属性的复杂表达式 计算属性 vs 方法计算属性的实例演示 侦听器&#xff08;Watchers&#xff09;创建侦听器侦听器的高级用法侦听器的深度观察侦听器的立即…

【ffmpeg命令基础】过滤处理

文章目录 前言过滤处理的介绍两种过滤类型简单滤波图简单滤波图是什么简单滤波示例 复杂滤波图复杂滤波是什么区别示例 总结 前言 FFmpeg是一款功能强大的开源音视频处理工具&#xff0c;广泛应用于音视频的采集、编解码、转码、流化、过滤和播放等领域。1本文将重点介绍FFmpe…

mysql存储引擎和备份

索引 事务 存储引擎 概念&#xff1a;存储引擎&#xff0c;就是一种数据库存储数据的机制&#xff0c;索引的技巧&#xff0c;锁定水平。 存储引擎。存储的方式和存储的格式。 存储引擎也属于mysql当中的组件&#xff0c;实际上操作的&#xff0c;执行的就是数据的读写I/O。…

ROC曲线和AUC

ROC曲线能更稳定反映模型的性能&#xff0c;对测试集合中数据分布的变化不敏感 AUC&#xff1a;当随机挑选一个正样本和一个负样本&#xff0c;根据当前的分类器计算得到的score将这个正样本排在负样本前面的概率 从AUC判断分类器&#xff08;预测模型&#xff09;优劣的标准&a…

【QT开发(19)】2023-QT 5.14.2实现Android开发,使用新版SDK,试图支持 emulator -avd 虚拟机

之前的博客【QT开发&#xff08;17&#xff09;】2023-QT 5.14.2实现Android开发&#xff0c;SDK是24.x版本的&#xff0c;虚拟机是32位的&#xff0c;但是现在虚拟机是64位的了&#xff0c;需要升级SDK匹配虚拟机 文章目录 最后的效果1.1 下载最新版 SDK tools (仅限命令行工…

JavaWeb-【3】DOM

笔记系列持续更新&#xff0c;真正做到详细&#xff01;&#xff01;本次系列重点讲解后端&#xff0c;那么第一阶段先讲解前端【续上篇CSS和JavaScript】 目录 1、dom介绍 2、html-dom 3、document 4、应用实例 ①、应用实例1 ②、多选框案例 ③、图片切换案例 ④、添…

高性能图数据库Neo4j从入门到实战

图数据库Neo4j介绍 什么是图数据库&#xff08;graph database&#xff09; 随着社交、电商、金融、零售、物联网等行业的快速发展&#xff0c;现实社会织起了了一张庞大而复杂的关系网&#xff0c;传统数据库很难处理关系运算。大数据行业需要处理的数据之间的关系随数据量呈…

密码学基础-Hash、MAC、HMAC 的区别与联系

密码学基础-Hash、MAC、HMAC 的区别与联系 Hash Hash 是一种从一段数据中创建小的数字“指纹”的方法。就像一个人的指纹代表一个人的信息一样&#xff0c;Hash 对输入的数据进行整理&#xff0c;生成一个代表该输入数据的“指纹” 数据。通常该指纹数据也可称之为摘要、散列…

CefSharp音视频编译与免费下载

注&#xff1a;Cefharp 音频和视频播放编译&#xff0c;生成相应的dll文件&#xff0c;从而支持项目开发。 建议编译至少 16G 的 RAM和至少 250G 的 SSD。该脚本以 E 盘为例&#xff0c;您需要在 E 盘上手动创建 cef 文件夹。禁止在转载后通过发布其他平台向用户收取下载费用。…

全国区块链职业技能大赛第八套区块链产品需求分析与方案设计

任务1-1:区块链产品需求分析与方案设计 医疗健康平台中涉及到医院、医生、患者等参与方,他们需要在区块链医疗健康平台中完成账户注册、身份上链、挂号就诊、查询病例等多种业务活动。通过对业务活动的功能分析,可以更好的服务系统的开发流程。基于医疗健康平台系统架构,以…