JS原生-弹框+阿里巴巴矢量图
效果：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹出框</title><style>.icon {width: 1em;height: 1em;vertical-align: -1.17em;margin-left: 165px;fill: currentColor;overflow: hidden;}#main {width: 100%;height: 100%;background-color: rgba(82, 82, 87, 0.5);display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;display: none;}#box {width: 474px;height: 57px;background: #F0F9EB;border-radius: 6px;position: absolute;/* z-index: 999; */}#stopIt {text-decoration: none;color: #17BE59;float: right;padding-top: 5px;margin-right: 10px;}p {font-size: 22px;font-family: Source Han Sans CN;font-weight: 400;color: #17BE59;margin: -21px 190px;}#box1 {width: 496px;height: 50px;border: 2px solid black;}#box2 {width: 0px;height: 50px;background-color: pink;}</style>
</head><body><script src="../概述/script/iconfont.js"></script><input type="button" value="弹框" id="eject"><div id="main"><div id="box">//对号<svg class="icon" aria-hidden="true"><use xlink:href="#icon-tijiaochenggong"></use></svg>//差号<svg class="icon" id="stopIt" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg><p>提交成功</p></div></div><script>let eject = document.getElementById("eject");let main = document.getElementById("main");let stopIt = document.getElementById("stopIt");//点击出现弹框eject.onclick = function () {main.style.display = "flex";}//点击×弹框消失stopIt.onclick = function () {main.style.display = "none";}</script>
</body></html>字体JS文件：cankao
window._iconfont_svg_string_='<svg><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#272536" ></path><path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" fill="#272536" ></path><path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" fill="#272536" ></path></symbol><symbol id="icon-tijiaochenggong" viewBox="0 0 1024 1024"><path d="M512 0C229.668571 0 0 229.668571 0 512s229.668571 512 512 512 512-229.668571 512-512S794.331429 0 512 0z m307.2 343.771429s-267.702857 295.497143-327.68 365.714285c-59.977143 70.217143-106.788571 0-106.788571 0L210.651429 529.554286s-27.794286-42.422857 21.942857-81.92c46.811429-38.034286 84.845714 0 84.845714 0l122.88 128.731428L746.057143 291.108571s29.257143-20.48 59.977143 5.851429c23.405714 21.942857 13.165714 46.811429 13.165714 46.811429z" fill="#68BF7B" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);参考文档：Js简朴原生实现弹框_原生js弹框_想被带飞的鱼的博客-CSDN博客
相关文章：
JS原生-弹框+阿里巴巴矢量图
效果： 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…...
vscode c++ 报错identifier “string“ is undefined
vscode c 报identifier “string” is undefined 问题 新装了电脑, 装好vsc和g等, 发现报错 但开头并没问题 解决 shiftctrlp选择 C/C Edit:COnfigurations (JSON)自动生成打开 c_cpp_properties.json添加g路径等 "cStandard": "c11","cppStanda…...
CocoaPods podfile 文件配置
记录一下关于 CocoaPods podfile 文件配置 指定源(Source) 默认情况下，在全局级别指定的源将按照依赖项匹配指定的顺序进行搜索。 对于特定的依赖，可以单独指定依赖源: pod PonyDebugger, :source > https://github.com/CocoaPods/Specs.git使用字库…...
Python大数据之linux学习总结——day10_hive调优
hive调优 hive调优hive命令和参数配置1.hive数据压缩压缩对比开启压缩 2.hive数据存储[练习]行列存储原理存储压缩比拓展dfs -du -h 3. fetch抓取4. 本地模式5. join的优化操作6. 列裁剪7. 分区裁剪8. group by 操作9. count(distinct)10. 笛卡尔积11. 动态分区[练习]12. 如何调…...
原理Redis-动态字符串SDS
动态字符串SDS Redis中保存的Key是字符串，value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串，因为C语言字符串存在很多问题： 获取字符串长度的需要通过运算非二进制安全…...
axios的封装之axios是基于什么封装的？
axios的封装_axios是基于什么封装的 axios是基于JavaScript的XMLHttpRequest 和 Promise 对象进行封装的使用axios发送GET请求的示例axios 拦截器 axios的封装_axios是基于什么封装的 axios是基于JavaScript的XMLHttpRequest 和 Promise 对象进行封装的 在浏览器中ÿ…...
应用软件安全编程-20生成强随机数
JavaAPI 提 供 了java,util.Random 类 来 实 现PRNG。 这 个 PRNG 是可移植和可重复的。因此，如 果 两 个java.util.Random 类的实例使用了相同的种子，会在所有的 Java 实 现 中 生 成 相 同 的 数 值 序 列 。 在应用初始化时，或者在每…...
【C语言.oj刷题】有序#整型矩阵元素查找##{思路+C源码}
目录 题目信息 题目分析： 法一： 遍历二维数组（低效） 思路 源码 局限性 法二： 对每一行二分查找（有所提效） 思路 源码 局限性 法三： 利用一切有利条件使用二分查找 思路 …...
rabbitmq默认交换机锁绑定的routingkey-待研究
例如这个是我的一个消息队列，它默认绑定的交换机是 什么类型呢? 看到这个图，感觉应该是一个默认的交换机，因为是default exchange 于是来到交换机来看看其他默认的交换机： 这里可以看到默认的交换机是direct（应该没…...
【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 4
1、下列哪个选项填到填到下图空缺处最合适 A、 B、 C、 D、 答案：D 2、按照如下图的规律摆放正方形，第 5 堆正方形的个数是 A、13 B、14 C、15 D、16 答案：D 3、从右面观察下面的立体图形，看到的是 A、 B、 C、 D、 答…...
基于STM32CubeMX和keil采用RTC时钟周期唤醒和闹钟实现LED与BEEP周期开关
文章目录 前言1. RTC概念1.1 RTC的时钟信号源1.2 预分频器1.3 实时时钟与日历数据1.4 周期性自动唤醒1.5 可编程闹钟 2. RTC相关中断3. STM32CubeMX配置3.1 时钟配置3.2 引脚配置3.3 RTC配置3.3.1 模式选择3.3.2 RTC基本参数配置3.3 中断配置 4. 代码编写总结 前言 RTC的功能有…...
Virtual安装centos后，xshell连接centos
1. 网络使用Host-Only模式动态分配IP，点确定后，centos 上运行 system restart network ，使用ifconfig查看新的ip，XShell可以直接连上centos， 但是由于使用的是Host-Only模式，centos不能访问网络，…...
Taro.navigateTo 使用URL传参数和目标页面参数获取
文章目录 1. Taro.navigateTo 简介2. 通过 URL 传递参数3. 目标页面参数获取4. 拓展与分析4.1 拓展4.2 URL参数的类型4.3 页面间通信 5. 总结 🎉欢迎来到Java学习路线专栏~Taro.navigateTo 使用URL传参数和目标页面参数获取 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x…...
Unity Meta Quest 一体机开发（七）：配置玩家 Hand Grab 功能
文章目录 📕教程说明📕玩家物体配置 Hand Grab Interactor⭐添加 Hand Grab Interactor 物体⭐激活 Hand Grab Visual 和 Hand Grab Glow⭐更新 Best Hover Interactor Group 📕配置可抓取物体（无抓取手势）⭐刚体和碰撞…...
我又开始贩卖焦虑了，机器视觉兄弟们，打工这生意盘不活了？让人逃离北上广深，是毒鸡汤吗？
我想大多数人和我想的一样，不要质疑自己的出身，也不必用一生去改变出身而获得融入感，思想富足这是我们留给自己一生最珍贵的礼物。也许一线城市容不下肉身，二三线城市容不下灵魂。那我回到生我养我的十八线小县城，这不…...
hyperledger fabric2.4测试网络添加组织数量
!!!修改内容比较繁琐,预期未来提供模板修改 修改初始配置文件,初始添加3个组织 organizations文件夹 /cryptogen文件夹下创建文件crypto-config-org3.yaml,内容如下: PeerOrgs:# ---------------------------------------------------------------------------# Org3# ----…...
分库分表
分库，分表，分库分表 “只分库“，“只分表“，“既分库又分表" 何时分库 在面对高并发的情况下，数据库连接成为性能瓶颈。当数据QPS过高导致数据库连接数不足时，考虑分库。在读多写少的场景下&#x…...
uniapp自定义组件
在UniApp中，你可以使用自定义组件来拓展应用程序的功能和界面。自定义组件是由多个Vue组件构成的，可以在应用程序中重复使用。 要创建一个自定义组件，你需要在UniApp项目中的components目录下创建一个新的文件夹，并在该文件夹中创…...
linux gdb调试
安装gdb yum install gdb -y 查看dump文件所在路径： 可通过 cat /proc/sys/kernel/core_pattern命令获取dump目录路径 gdb调试： 可执行文件为 xxx（例如：main），结合其运行时产生的dump文件进行调试 命令&a…...
java17 linux 环境配置
linux版本 :centos 8 1.能联网的情况下: wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 2.mkdir /usr/local/java tar zxvf jdk-17_linux-x64_bin.tar.gz -C /usr/local/java 3./etc/profile增加: export JAVA_HOME/usr/local/java/jdk-17.…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ，不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...