草庐IT

纯前端

全部标签

前端学习--JS入门(5) 事件监听/事件类型/事件对象

一、事件监听事件是系统运行时发生的动作或者发生的事情1.1事件监听元素对象.addEventListener('事件类型',要执行的函数) 三要素:事件源--获取被触发的dom元素事件类型--触发方式(比如click/mouseover)事件调用函数--触发了做什么事案例-随机点名随机*{margin:0;padding:0;}.box{width:500px;height:300px;margin:50pxauto;background-color:rgba(255,192,203,0.4);border:1pxdotted#333;border-radius:10px;}h2{margin

前端渲染后端返回的HTML格式的数据

在日常开发中,经常有需要前端渲染后端返回页面的需求,对于不同数据结构,前端的渲染方式也不尽相同,本文旨在对各种情况进行总结。后端返回纯html文件格式数据包含html标签等元素,数据类型如下图:前端通过js方式处理//必须要存进localstorage,否则会报错,显示不完全window.localStorage.removeItem('callbackHTML')window.localStorage.setItem('callbackHTML',res.data.htmlStr)//读取本地保存的html数据,使用新窗口打开varnewWin=window.open('','_blank'

2024 款:最新前端技术趋势

Hello,大家好,我是Sunday。上一次的时候聊了那么些已经落后的前端开发技术。但是光知道什么技术落后了是不够的,咱们还得知道前端最新的技术趋势是什么。所以,今天这篇文章,咱们就来聊一聊,2023最新前端技术趋势。01:反TypeScript大家先不要着急骂我,大家先想一想:“JS的免于强类型是否为你带来了便利,TS的强类型是否为你带来了不便”。在很多中小厂的日常项目开发之中,你真的有必要使用TypeScript吗?它所谓的严谨性,真的能避免了屎山代码的出现吗?应该是不能的吧。同时恰恰相反,当团队的平均技术能力不足时,TS反而会带来更多的不便,让原先没有那么屎山的代码,变得彻底屎山了。我们

从0到1教你搭建前端团队的组件系统

前言随着vue/react这类以数据驱动为主的web框架的不断完善和壮大,越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用,比如基于react的开源组件库ant-design,material,又比如基于vue的开源组件库elementUI,iView等。我们在开发管理系统或者中台产品时,完全可以使用这种第三方库来开发,因为首先其服务的用户群体比较小众,一般是企业或者运营人员来使用,重点在于功能和业务,所以在B端产品比较适合;另一点就是设计要求相对于C端产品会低一些,因为B端产品或者管理系统风格统一简单反而会降低使用者的学习成本。所以对于上述

前端语音识别(webkitSpeechRecognition)

需求:需要在浏览器(pc)实现语音转文字。webkitSpeechRecognition(语音识别)//创建一个webkitSpeechRecognition实例letnewRecognition=newwebkitSpeechRecognition();//设置识别到声音就关闭还是一直识别newRecognition.continuous=true;//开启录音newRecognition.start();//关闭录音newRecognition.stop();//识别到结果即触发,所以讲话过程多次停顿的情况下会触发多次newRecognition.onresult=function(eve

uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)

uniapp仿喜茶小程序前端模板兼容:网页、app、小程序部分截图 部分代码 {{item.name||''}} {{item.desc||''}} {{item.name||''}} {{item.desc||''}} 我的积分22 可兑换喜茶券和丰富灵感周边 会员码 ex

开源免费记账,后端,前端和App,Docker一键部署记账环境

开源免费的记账解决方案,包括后端,网页版,App,主要用于个人生活记账,开店收支记账,支持docker一键部署自己的记账程序。主要功能监控个人资产负债。记录个人支出和收入。支持多个账本记账支持多币种支持多种账本模板支持账本的分类和标签管理分组多用户记账报表统计支持dockercompose一键部署源代码:https://github.com/getmoneynote/moneynote-api新手搭建记账体系:从零开始搭建完善的记账体系-少数派

JSON简介及前端简单解析(一)

JSON现在常用来做前后端数据交互,两个蝴蝶飞只是简单的对JSON做一下讲解和简单使用。关于JSON,我还了解的远远不够。由于本人经验有限,嘴皮子不溜,所以学术性,概念性,底层性的知识点暂时不做介绍。文章中有错误之处,欢迎拍砖和指点。特别感谢"菜鸟教程“(所举例子和思路大部分改编于此)和"JSON官网”(图片来源),所有的资料大部分是两者提供,为了方便书写,故不一一指名出处,请谅解,非常抱歉。一.一JSON的简单概述JSON,全称是JavaScriptObjectNatotion(JavaScript对象表示法),是存储和交换文本信息的语法。与XML类似。但JSON比XML更小、更快,更易解析

Vue+LogicFlow+Flowable 前端+后端实现工作流

一、实现效果前端使用LogicFlow框架绘制流程图,可以导出为xml工作流标准格式数据,通过xml文件传递到后端进行Flowable流程注册,并保存到数据库中。二、BPM传输文件格式(.xml)如需添加承办人的话,需要在LogicFlow导出文件的基础上手动添加xmlns:flowable="http://flowable.org/bpmn"flowable插件,不然后台无法识别flowable:candidateUsers。bpmn:definitionsxmlns:flowable="http://flowable.org/bpmn"xmlns:xsi="http://www.w3.or

浏览器自动播放音视频-前端实现方案

目录前言浏览器自动播放策略策略详情:实现方案 方案1:互动后播放方案2:互动后出声总结前言在开发中可能有遇到这样的需求,当用户打开页面后,需要自动播放视频或音频,按理说那就打开页面时play()一下不就搞定了吗,但实际情况很明显不是,不然也没得这篇文章喽,要实现这个需求,我们得先了解一下浏览器自动播放策略。再给出相应解决方案。浏览器自动播放策略Chrome浏览器的自动播放策略自Chrome66起生效,动机是改善用户体验策略详情:Chrome的自动播放政策很简单:始终允许静音自动播放。在以下情况下,带声音的自动播放会被允许:用户已经与当前域进行了交互(click、tap)在桌面设备上,用户的==