web前端
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
onlylele
细节决定感知!
展开
-
js递归给每项添加字段和值
通过js递归循环根据指定条件给数组中的每项数据新增字段和值;原创 2024-04-30 09:24:19 · 367 阅读 · 0 评论 -
常用页面中上下无缝滚动效果
常用web页面中设置上下无限滚动效果;(左右滚动类同)代码如下: <div id="colee_left" class="news-right-cont" style="touch-action:none;height: 360px;overflow-y: hidden;"> <ul id="colee_left1">原创 2021-03-11 14:33:35 · 743 阅读 · 0 评论 -
web 文本打字动态效果
说明. 实现文本内容的打字输入的动态效果,代码实现如下:html:<div class="hcontainer text-center flex-center" id="HotNews"> 公司使命:服务国家战略、保障人民健康、引领行业发展/div>js效果实现:<script LANGUAGE="JavaScript"> var NewsTime = 2000; //每条新闻的停留时间 var TextTime = 50; .原创 2021-03-04 10:36:22 · 586 阅读 · 1 评论 -
web页面常用分页效果
1、分页效果如下:代码实现:<!-- 分页 --> <div id="pages" class="pb-50 mtb-25"> <div class="common"> <ul> <ul class="clearfix page-center"> <li><span class="rows">共 18 条记录</原创 2021-02-24 09:27:13 · 590 阅读 · 0 评论 -
Css3、Scss 常用的布局设置-通用
常见的几种css布局垂直居中// 第一种 绝对定位#parent{ position:relative; height:400px; .son{ position:absolute; width:100px; height:100px; top: 50%; transform: translateY(-50%); }}// 第二种 flex布局#parent{ display:flex; align-items:center; .原创 2020-10-08 16:39:25 · 847 阅读 · 0 评论 -
css3 图片阴影、翘边效果
CSS3实现曲线阴影和翘边阴影往往我们在做一些特殊的阴影效果的时候,使用图片做背景的方式实际上是很差劲的,在不考虑适配老版本浏览器的前提下,我们可以使用css3的自定义出自己想要的阴影风格。下面将以曲线阴影和翘边阴影为例,讲解自定义阴影的过程。先来看下效果图曲线阴影曲线阴影其实可以使用双层阴影重叠的方式实现我们将取消阴影的图片做下分解应该会更容易理解,示意图如下:如上图,图1基础的阴影下,在加一个有弧度的阴影即可。1、图1基础阴影很容易实现,内阴影+外阴影.box-shad转载 2020-10-07 10:51:05 · 522 阅读 · 0 评论 -
css3 文本超出处理和添加阴影效果
效果如下:代码修改阴影如下:.carousel { margin-top: -20upx; width: 100%; height: 320upx; box-shadow: 0px 20px 20px -20px #5E5E5E; // 主要 .carousel-item { width: 100%; height: 100%; padding: 0 28upx; overflow: hidden; } image { width:原创 2020-08-18 15:12:05 · 697 阅读 · 0 评论 -
CSS 自定义滚动条设置
需要,默认滚动条显示太丑,如何自定滚动条实现;效果:.overflow-auto { overflow: auto; height: calc(100% - 44px); &::-webkit-scrollbar { width: 6px; height: 6px; } &::-webkit-scrollbar-track-piece { background-color: #eee; margin: -2px; } &::-webkit-原创 2020-06-17 17:47:13 · 246 阅读 · 0 评论 -
Echars 绘制饼图函数封装实现
效果如下:代码如下: <!-- 图表 --> <div v-show="echartsBoxShow" id="echarts_box" class="echarts_box"></div><script> import echarts from 'echarts'export default { name: 'statisticsItem', data() { return { loading: tru原创 2020-06-04 09:47:24 · 282 阅读 · 0 评论 -
css 3 块内容在一行时,超出时加滚动
当设置的块级内容需要再同一行中展示,手机端超出一屏的宽度时,让其可以拖动;html部分:<div class="item-evel"> <div class="clearfloat item-jt"> <div> <p class="item-jt-qd">¥10.00</p> ...原创 2019-10-16 18:55:33 · 1815 阅读 · 0 评论 -
javascript定时器倒计时自定义时间循环
html> head , body...此处省略。。<div class="TitAlis clearfloat"> <h3>健康团 <span class="hotDp"><a class="fontRed" href="#">每天一次限时优惠 一定要把握机会哟&l原创 2018-09-27 13:09:32 · 1659 阅读 · 0 评论 -
C-Lodop打印控件通过https协议访问时设置及使用参考
通过https访问的网站C-Lodop打印控件无法使用问题处理:1、前端改造LodopFuncs.js代码//改造后的代码if (needCLodop()) { var protocol = window.location.protocol;//http、https var src1,src2; if(protocol == 'https:'){ ...原创 2020-04-16 16:46:39 · 8011 阅读 · 0 评论 -
echars绘制图表,切换页面后返回,无刷新数据图表不显示问题;
使用echars图表时,layui框架中,切换页面时,在火狐浏览器图表不显示问题情况;图表效果如下:代码如下:1、html: <div id="cumstorZ" style="height:360px;width: 100%;min-width: 996px;"></div>2、Javascript: //调用 ...原创 2020-01-11 14:32:53 · 1627 阅读 · 0 评论 -
Web中 C-Lodop 打印常用表单前端排版自定义设置;
常用的打印设置:使用C-Lodop插件实现常用单据打印功能;以常用订货单和调拨单为例设置打印功能;需要下载Lodop 打印的插件:http://www.lodop.net/download.html1、常用订货单设置://引入:<link rel="stylesheet" href="/layui/css/layui.css" media="all" /><sc...原创 2019-12-18 18:28:23 · 2580 阅读 · 0 评论 -
js/swiper 内容块超出时加滑动控制和左右按钮控制滑动;
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>slidesPerGroup_swiper3参数选项</title><meta name="keywor...原创 2019-11-04 11:01:11 · 795 阅读 · 0 评论 -
Web常用meta设置及浏览器模式设置
1、WebApp全屏模式:<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">//注意:viewport 后面加上 minimal-ui 在safri 体现效...原创 2019-03-28 09:12:18 · 873 阅读 · 0 评论 -
javascript 一个数组对象字段和另一个数组对象字段关联操作
1、比较两个数组对象,取出不同的值var array1 = [ {"Num": "A " },{"Num": "B" }];var array2 = [ {"Num": "A ","Name": "t1 " }, {"Num": "B","Name": "t2"}, {"Num": "C " ,"Name": "t3 "}];var result = [];for(var i = 0...转载 2019-07-05 15:20:13 · 2333 阅读 · 0 评论 -
js 常用数组,json对象,字符串间相互转换
一、对象转字符串:var obj = { name: '徐同保', job: 'web前端' };var objString = JSON.stringify(obj);二、字符串转对象:var objString = "{name: '徐同保',job: 'web前端'}"; var objNew = JSON.parse(objStr...原创 2019-08-29 19:12:17 · 133 阅读 · 0 评论 -
js手机号验证方法结合layui使用验证
javascript 手机号电话验证方法封装及使用,结合layui验证使用; //电话验证 function ValidatePhone(val){ var isPhone = /^1[3456789]\d{9}$/;//手机号码 var isMob= /^0?1[0-9][0-9]\d{8}$/;// 座机格式 ...原创 2019-08-30 09:35:05 · 2533 阅读 · 1 评论 -
模仿淘宝多规格选择demo
1.模仿淘宝多规格选择demo ,说明:依赖文件:vant.css, vue.js, vant.js内容代码 详细情况:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模拟淘宝多规格选择</title> <link rel...原创 2019-03-23 11:37:16 · 4354 阅读 · 0 评论