Web前端
关注
分享
扫一扫
狮子座的程序员
不积跬步无以至千里，不积小流无以成江海
展开
-
echarts——折线图显示最后一个数据
【代码】echarts——折线图显示最后一个数据。原创 2023-01-31 11:44:50 · 2499 阅读 · 0 评论 -
Echarts个人笔记
【代码】Echarts个人笔记。原创 2022-12-12 20:09:11 · 123 阅读 · 0 评论 -
前端——如何切换html还能使背景音乐继续播放
现在有个需求，就是切换html还能使背景音乐继续播放，不会重新播放。众所周知，html一旦切换，页面内容会重新加载，音乐也会重新加载播放，怎么才能做到音乐连续播放，而不是重新播放呢？查资料发现前辈们提了个办法：用iframe来切换页面，这样在iframe本身的音乐就不会中断重新刷新了。嗯！好办法！原创 2022-11-08 09:13:26 · 4626 阅读 · 15 评论 -
JS存取cookie示例
@paramtimecookie的存放时间，以'天'为单位例子1。*@paramnamecookie的key例子userName。*@paramvaluecookie的value例子张三。*默认的cookie写入方法。*获取Cookie中的值。//获取指定名称的cookie的值。原创 2022-07-24 14:50:18 · 513 阅读 · 0 评论 -
Echarts技巧
echarts设置饼图的显示原创 2022-07-13 14:09:25 · 208 阅读 · 0 评论 -
前端——JS中获取时间以及格式化处理
JS中获取时间以及格式化处理文章目录JS中获取时间以及格式化处理获取时间运行结果格式化日期运行结果获取时间var time = new Date();console.log(time.getYear()); //获取已过年数，2021-1900console.log(time.getFullYear()); //获取完整的年份，2021console.log(time.getMonth()); //获取当前月份(0-11,0代表1月)console.log(time.getDate());原创 2021-12-01 14:01:01 · 3073 阅读 · 0 评论 -
vue项目云e办——登录页面（一）
云e办文章目录云e办视频学习地址前端目标效果登录页面代码视频学习地址云e办视频学习地址前端目标表单可以校验是否为空，如果为空，点击登录时弹出错误提示框。效果登录页面代码登录页面的views，Login.vue<template> <div> <el-form :rules="rules" label-position="left" label-width="70px" ref="loginForm" :model="loginFor原创 2021-11-20 19:34:52 · 1611 阅读 · 2 评论 -
Vue——vuex的使用
Vuex文章目录Vuex为何要用vuexvuex的用途vuex安装vuex的使用vuex获取数据vuex触发事件为何要用vuexvue中兄弟组件之间很难进行值的传递，于是产生了vuex来解决这个问题。vuex的用途相当于全局变量，在vuex中存储的属性和方法，可以在整个项目里进行调用。vuex安装npm install vuex -Svuex的使用src下面新建了store目录，下面新建了index.js，index.js代码如下import Vue from 'vue'//引入v原创 2021-11-17 16:38:48 · 417 阅读 · 0 评论 -
原生JS实现文件上传中图片的预显示，核心代码仅10行
实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title></head><style> *{ margin: 0; padding: 0; } body{ width: 100vw;原创 2021-10-31 20:47:59 · 131 阅读 · 1 评论 -
跳动的球CSS
实现效果实现代码<!DOCTYPE html><html lang="en"> <style> body{ width: 100vw; height: 100vh; display: flex; background: #34495e; justify-content: center; align-原创 2021-10-25 19:48:46 · 202 阅读 · 0 评论 -
v-for的使用
代码示例<li :class="tab.isActive?'navigator-li-active navigator-li':'navigator-li'" v-for="(tab,index) in tabs" :key="tab.id"@click="choiceTab(index)"> <a>{{tab.value}}</a></li>v-for="(tab,index) in tabs"(tab,index)中tab代表对象的别名，i原创 2021-10-23 20:52:03 · 306 阅读 · 0 评论 -
qq、微信、微博的svg小图标
实现效果实现代码直接复制svg代码即可，如果要修改大小，请修改width和height参数<!--qq--><svg class="Zi Zi--QQ Login-socialIcon" fill="#50c8fd" viewBox="0 0 24 24" width="40" height="40"><path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .原创 2021-10-17 09:08:32 · 3058 阅读 · 0 评论 -
前端——AJAX
jQuery方式的AJAX <script> // get //第一个参数是地址url，第二个参数是数据data，第三个参数是返回结果函数 $('button').eq(0).click(function(){ $.get('http://localhost:8000/jquery-server',{a:100,b:200},function(response){ console.l原创 2021-08-22 10:58:15 · 130 阅读 · 0 评论 -
CSS文字多时设置两行后显示省略号
display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;原创 2021-08-10 10:00:41 · 462 阅读 · 0 评论 -
vue.js以及vue_devtools的网盘
链接：https://pan.baidu.com/s/1AvA0zTUvzR2evNurejtDhA提取码：ucmh–来自百度网盘超级会员V4的分享原创 2021-07-16 10:43:19 · 2714 阅读 · 1 评论 -
让你的网页更加生动活泼——点击显示文字气泡+设置鼠标样式
效果展示录屏没法录上鼠标样式，截图也没法录上，正常显示是有鼠标样式的。显示鼠标样式url中为鼠标样式图片，可自行选择！<style>body{ cursor:url('HelloKittynormalselect.ico'),auto;}</style>点击显示文字气泡记得引入jquery！！！<script type="text/javascript"> var a_idx = 0; jQuery(documen原创 2021-05-09 21:54:34 · 574 阅读 · 0 评论 -
前端——【JS】——用JS实现全国城市二级联动下拉框
预览图片项目说明点击省的下拉框，可以出现省份，选择省后，出现对应的市。博主设置了默认选择省份为“江苏省”。下面有代码，可以根据数据库获取的省市信息进行设置默认值，方便一些。实现代码<html><head> <title>hello</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script t原创 2020-05-19 22:44:55 · 3543 阅读 · 0 评论 -
JavaWeb——【前端】——Bootstrap的模态框
结果展示出现一个模态框进行显示或者数据的输入与传输**用途：**刚刚其实已经说过了，1.进行数据的显示 2.进行form的input表单的配合进行数据的传输，不过值得一提的是，模态框不能通过form的action属性进行重定向，需要通过js+ajax进行数据的json格式传输或者直接获取数据用get为后缀的方式。实现代码<html><head> <lin...原创 2020-03-19 15:17:12 · 573 阅读 · 0 评论 -
JavaWeb——【前端】——JS实现自动换图
效果展示每隔2s自动换图实现代码纯html+js<html><head> <title>hello</title> <script type="text/javaScript"> //图片的序号，初始为0 var i=0; //设置图片集合 var ...原创 2020-03-14 15:46:44 · 1139 阅读 · 0 评论 -
JavaWeb——【前端】——登录页面
页面效果实现代码<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:https="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">&...原创 2020-03-14 11:27:11 · 1879 阅读 · 0 评论 -
JavaWeb——【前端】——注册页面
页面效果实现代码<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:https="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">&l...原创 2020-03-14 11:20:44 · 1000 阅读 · 0 评论 -
JavaWeb——【报错】——HTML文件中文乱码解决
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>原创 2020-02-25 11:42:23 · 787 阅读 · 0 评论 -
JavaWeb——【JS】——一篇文章学会JS，带案例
JS文章目录JS1.JavaScript简介2.JavaScript入门2.1.script 标签2.2.JavaScript 输出2.3.JavaScript的语法2.3.1.关键字2.3.2.标识符2.3.3.注释2.3.4.变量2.3.5.数据类型2.4.JavaScript变量作用域2.4.1.局部变量2.4.2.全局变量2.4.3.变量生命周期2.5.JavaScript 函数2.5....原创 2020-01-08 17:31:32 · 889 阅读 · 0 评论 -
JavaWeb——【CSS】——一篇文章了解CSS
CSS文章目录CSS4.CSS4.1.css概述4.2.CSS基础语法4.3.CSS元素选择器4.3.1.元素选择器4.3.2.类选择器4.3.3.ID选择器4.3.4.属性选择器4.3.5.后代选择器4.3.6.子元素选择器4.3.7.选择器分组4.4.CSS导入方式4.4.1.嵌入式4.4.2.行内式4.4.3.链接式4.5.CSS浮动4.5.1.CSS 浮动介绍4.5.2.float属性4...原创 2020-01-08 17:05:22 · 624 阅读 · 0 评论 -
JavaWeb——【HTML】——一篇文章学会HTML
HTML文章目录HTML1.HTML1.1.什么是HTML1.2.HTML的语法结构2.HTML入门3.HTML标签3.1.HTML 标题3.2.HTML段落标签3.3.HTML水平线标签3.4.HTML字体标签3.5.HTML图像标签3.6.列表标签3.7.链接标签3.8.表格标签3.9.表格中的表头3.10.合并单元格3.11.表格练习题3.12.框架标签3.13.框架使用案例2.网页注册界...原创 2020-01-08 14:00:30 · 744 阅读 · 0 评论 -
JavaWeb——【Bootstrap】——一篇文章入门Bootstrap，值得你一看！
Bootstrap文章目录Bootstrap1.Bootstrap1.1.概述1.2.Bootstrap 包含的内容1.3.官网&下载1.4.文件结构1.4.1.源码目录1.4.2.预编译版1.5.环境配置1.5.1.CDN 方式引入2.Bootstrap使用2.1.Bootstrap中的排版2.1.1.标题2.1.2.文本2.2.Bootstrap中的表格2.2.1.基本实例2.2.2...原创 2020-01-06 21:38:46 · 1881 阅读 · 0 评论 -
前端项目实例——旋转万花筒照片墙（HTML+CSS）
效果实现代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>万花筒</title><style> *{ padding: 0; margin: 0; } img{ width:200px; height:...原创 2019-07-30 21:09:59 · 7113 阅读 · 21 评论 -
HTML基础标签(一)
什么是HTML？HTML是超文本标记语言，标记语言：使用一组标签对内容进行描述的语言，不是编程语言HTML主要部分：头部分：<head></head>体部分: <body></body>html都是由开始标签和结束标签组成(<hr />)HTML的标签：标题标签：从<h1>到<h6>逐渐变小<h原创 2018-05-22 22:51:09 · 200 阅读 · 0 评论