说明HTML网页的加载顺序是同步加载，意思是从上向下执行加载的，当解析到<script>标签，就会把<script>加载执行完成后，再继续加载网页，所以控制Js脚本的加载顺序还是有必要的。延迟Js脚本加载只对引用外部Js文件有用在script标签里加上defer属性，这个脚本就会在网页加载完成再加载。<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.4.1.min.js"defer></script>Js脚本异步加载使用异步加载时，一定要注意Js代码执行执行的逻辑顺序，因为会对脚本的执行顺序失去控制。只对引用外部Js文件有用在script标签里加上async属性，这个脚本就会在网页加载的同时，一起加载。<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.4.1.min.js"async></script>小彩蛋<noscript>标签，有兴趣，自行百度
定义<meta>标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。<meta>标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。元信息可以被浏览器（指导它如何加载和显示页面）所使用，也可以有利于搜索引擎收录页面（指定关键词）。HTML5通过<meta>标签引入一个新的方法，让网页尺寸实现自适应。注意<meta>标签永远位于<head>标签内部。content属性必须和name或http-equiv属性共存亡。为了让网页尺寸实现自适应，你应该在HTML文档中加入下面代码：<metaname="viewport"content="width=device-width,initial-scale=1.0">部分属性name常于content属性连用name相关值application-name：当前页所属Web应用系统的名称。author：当前页的作者名。description：当前页的内容描述。generator：用来生成HTML的软件名称。keywords：当前页的关键词。viewport：网页尺寸自适应。实例实例一：指定网页编码<metacharset="UTF-8">实例二：为搜索引擎提供关键词<metaname="keywords"content="大数据技术,技术博客,技术分析,大数据开发,爬虫开发,大数据男孩,个人博客,可视化,bigdataboy,爬虫项目">实例三：描述网页内容<metaname="description"content="网络让我接近世界，但也让我远离生活~一个学习大数据的小白博主">实例四：定义网页的作者<metaname="author"content="大数据男孩">实例五：设置网页尺寸自适应<metaname="viewport"content="width=device-width,initial-scale=1.0">实例六：每5秒刷新一下浏览器并跳转到指定页面<metahttp-equiv="refresh"content="5;https://bigdataboy.cn/">
概述WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有：尺寸单位样式导入尺寸单位rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpx样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。/*pages/css/css.wxss*/@import"test.wxss";.middle-p{padding:15px;}内联样式WXML上也支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。<viewstyle="color:{{color}};"/>class：使用规则跟Html标签里的class一样<viewclass="normal_view"/>支持的选择器选择器样例样例描述.class.intro选择所有拥有class=”intro”的组件#id#firstname选择拥有id=”firstname”的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容全局样式与局部样式定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。
数据绑定在页面Js里绑定变量/***页面的初始数据*/data:{id:"big",msg:"大数据男孩",dict:{name:"小蓝"}},普通写法<view>{{msg}}</view><view>{{dict.name}}</view>组件属性<viewid="{{id}}"></view>bool类型bool类型在属性里不能直接写，需要加{{}}才有用<view><checkboxchecked="{{false}}"></checkbox></view>运算页面Js文件绑定变量数组/***页面的初始数据*/data:{a:10,b:20,isChecked:true,c:"大数据",d:"男孩"},三元运算<view><checkboxchecked="{{isChecked?true:flase}}"></checkbox></view>算数运算<view>{{a+b}}</view>字符串组合<view>{{c+d}}</view>wx:for循环页面Js文件绑定变量数组/***页面的初始数据*/data:{arr:["1","2","3","4"]},wxml文件循环变量数组<!--默认遍历的元素是item索引是index--><!--wx:key是为了提高性能--><view><viewwx:for="{{arr}}"wx:key="index">{{index}}:{{item}}</view></view>改变默认的遍历元素&索引<view><blockwx:for="{{arr}}"wx:key="index"wx:for-item="color"wx:for-index="num">{{color}}{{num}}</block></view>wx:if条件渲染主要作用是隐藏&显示标签/***页面的初始数据*/data:{a:5},显示&隐藏<viewwx-if="{{true}}">大数据男孩</view><viewwx-if="{{false}}">你看不见我</view>条件判断<viewwx:if="{{a>5}}">6</view><viewwx:elif="{{a<5}}">4</view><viewwx:else>5</view>
相关网页所有的详细文档，请看官网微信小程序入门概述下载官方开发工具官方工具教程基础组件框架文件介绍├──pages││──index││├──index.wxml││├──index.js││├──index.json││└──index.wxss│└──logs│├──logs.wxml│└──logs.js├──utils│└──util.js├──app.js├──app.json├──app.wxss└──project.config.jsonpages文件夹pages文件夹里面存放所有页面每页文件都由四部分组成.wxml（标签布局）、.js（逻辑）、.json（配置）、.wxss（布局样式）utils文件夹存放公共逻辑（有默认代码）app.js全局的逻辑（有默认代码）app.json全局配置（json文件没有注释，所以不能注释）{页面路径"pages":["pages/index/index","pages/logs/logs"],首页配置"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"小程序-首页","navigationBarTextStyle":"black","enablePullDownRefresh":true}}导航栏在app.json里添加配置，list里的导航必须大于两个"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"icons/index_active.png","selectedIconPath":"icons/index.png"},{"pagePath":"pages/logs/logs","text":"首页","iconPath":"icons/index_active.png","selectedIconPath":"icons/index.png"}]}
留存率说明在互联网行业当中，因为拉新或推广的活动把用户引过来，用户开始访问网站/应用，但是经过一段时间可能就会有一部分客户逐渐流失了。留存率定义为用户在某段时间内开始使用网站/应用（一般定义是注册），经过一段时间后，仍然继续使用的人被认作是留存用户。留存率体现了网站/应用的质量和保留用户的能力。留存率计算方法：留存率=登录用户数/新增用户数*100%一般统计周期为天，常见的周期维度有次日、7日、14日/15日、30日、60日、90日）比如：次日留存率：（第一天新增用户数，第2天还登录的用户数）/第一天总注册用户数7日留存率：（第一天新增用户数，第8天还登录的用户数）/第一天总注册用户数30日留存率：（第一天新增用户数，第31天还登录的用户数）/第一天总注册用户Spark计算难点留存率涉及到两组数据的计算（新增人数&某天留存人数）计算思路思路分解数据例子：日期-用户ID2020-01-01,17731012020-01-01,17731022020-01-02,17731012020-01-02,17731032020-01-03,17731012020-01-03,1773102自定义累加器官方的提供的累加器里没有mutable.Map()的累加器优点：能够通过Key方便的取到Value。就是通过日期，方便的取到用户ID。//自定义Map累加器classmapAccumulatorextendsAccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]{//累加器存数据MapvardateToUser:mutable.Map[String,Iterable[String]]=mutable.Map[String,Iterable[String]]()//判断累加器是否是初始化状态overridedefisZero:Boolean=dateToUser.isEmpty//复制累加器对象overridedefcopy():AccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]={newmapAccumulator()}//重置累加器overridedefreset():Unit={dateToUser.clear()}//向累加器放数据overridedefadd(a:Array[(String,Iterable[String])]):Unit={valdate:String=a(0)._1valusers:Iterable[String]=a(0)._2dateToUser(date)=users}//把其他分区的累加器的数据合并overridedefmerge(other:AccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]):Unit={other.value.foreach(line=>dateToUser(line._1)=line._2)}//返回累加器的结果overridedefvalue:mutable.Map[String,Iterable[String]]=dateToUser}注册累加器//注册累加器valuser_id_lists=newmapAccumulator()sc.register(user_id_lists)读取数据&分组valcsv_rdd=sc.textFile("文件")//相同日期分组valgroup_rdd=csv_rdd.groupByKey()存入累加器//按照分区遍历提高性能group_rdd.foreachPartition{partition=>partition.foreach{//日期为Key用户ID为Value，形成Map()添加到累加器line=>user_id_lists.add(Array(line._1->line._2.toSet))}}广播变量取出累加器里的数据进行广播变量//广播变量为累加器的值valuser_id_map:Broadcast[mutable.Map[String,Iterable[String]]]=sc.broadcast(user_id_lists.value)计算留存率再次遍历前面分组的RDD，通过日期取出广播变量里的用户IDvalres_rdd=group_rdd.mapPartitions{partition=>partition.map{line=>//获取当前日期的获取用户列表，没有获取到返回空的迭代valat_user_id:Iterable[String]=user_id_map.value.getOrElse(line._1,Iterable())//获取之前日期这个函数在文章后面valyesterday=getIntervalDay(line._1,-1)//获取之前日期的用户列表，没有获取到返回空的迭代valbefore_user_id:Iterable[String]=user_id_map.value.getOrElse(yesterday,Iterable())//获取之前日期总人数valbefore_all_user:Double=before_user_id.size.toDouble//留存人数：两日期用户列表去重取交集valkeep_user:Double=before_user_id.toSet.intersect(at_user_id.toSet).size.toDouble//留存率留存人数/前日期总人数varkeep_rate:Double=keep_user/before_all_userif(keep_rate.isNaN){keep_rate=0}//返回日期-留存率(line._1,keep_rate)}}计算间隔x天的日期//获取指定间隔日期defgetIntervalDay(date:String,num:Int):String={/*date：yyyy-MM-dd格式日期字符串num:间隔天数，有正负数之分。+(前面)-(后面)-1就是昨天，1就是明天*/vardateFormat:SimpleDateFormat=newSimpleDateFormat("yyyy-MM-dd")varcal:Calendar=Calendar.getInstance()cal.setTime(dateFormat.parse(date))cal.add(Calendar.DATE,num)varday=dateFormat.format(cal.getTime())day}
说明这算是一个爬虫的小项目吧，后端代码架构有点凌乱，毕竟新手经验不足。Github地址：https://github.com/bigdataboy2020/Flask_douyin特点前端：LayUI后端：Flask开发语言：Python演示地址：https://douyin.bigdataboy.cn/解析完全本地完成部署教程0x00安装宝塔官方教程：https://www.bt.cn/bbs/thread-19376-1-1.html0x01上传源码解压其中有些文件下图没有，等后面步骤全部完成就有了。0x01配置Python项目使用宝塔的Python项目管理器，能非常方便的部署Python项目，推荐使用。0x02域名映射如果想要运行稳定一点，建议查看宝塔部署Flask项目
概述如你所愿，在layui2.0的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用layui排版你的响应式网站和后台系统了。layui的栅格系统采用业界比较常见的12等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。官网：https://www.layui.com/doc/element/layout.html使用样式<style>.grid-demo{line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#00F7DE;}</style>布局容器layui-container类会随着屏幕大小改变成相应的宽度，响应式推荐使用响应式布局容器固定宽度：大屏（>=1200px）宽度为1170px中屏（>=992px）宽度为970px小屏（>=768px）宽度为750px超小屏（100%）<body><divclass="layui-container"style="background:#2aabd2">大数据男孩</div></body>layui-fluid类流式布局容器任何屏幕大小都是百分百宽度，适用于单独的移动端<body><divclass="layui-fluid"style="background:#2aabd2">大数据男孩</div></body>栅格系统栅格的响应式能力，得益于CSS3媒体查询（MediaQueries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。-超小屏幕(手机<768px)小屏幕(平板≥768px)中等屏幕(桌面≥992px)大型屏幕(桌面≥1200px).layui-container的值auto750px970px1170px标记xssmmdlg列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*响应行为始终按设定的比例水平排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列同前一个同前一个<!--中屏每个占4份3X4=12格--><style>.grid-demo{padding:10px;line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#63BA79;}</style><divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo">大数据男孩</div><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4grid-demo">大数据男孩</div></div></div>列偏移对列追加类似layui-col-md-offset*的预设类，从而让列向右偏移。其中*号代表的是偏移占据的列数，可选中为1-12。如：layui-col-md-offset4，即代表在“中型桌面屏幕”下，让该列向右偏移4个列宽度<divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4layui-col-md-offset4grid-demo-bg1">大数据男孩</div></div></div>列间距通过“列间距”的预设类，来设定列之间的间距。且一行中·最左的列不会出现左边距，最右的列不会出现右边距。可以设置layui-col-space1~layui-col-space30。<divclass="layui-container"><!--间距10px--><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>响应式公共类类名（class）说明layui-show-*-block定义不同设备下的display:block;*可选值有：xs、sm、md、lglayui-show-*-inline定义不同设备下的display:inline;*可选值同上layui-show-*-inline-block定义不同设备下的display:inline-block;*可选值同上layui-hide-*定义不同设备下的隐藏类，即：display:none;*可选值同上<divclass="layui-container"><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><!--中屏下隐藏--><divclass="layui-col-md4layui-hide-md"><divclass="grid-demo">大数据男孩2</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>
概述导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。官网：https://www.layui.com/doc/element/nav.html使用导航主要类layui-nav：导航栏layui-nav-item：导航条目layui-nav-child：二级菜单layui-this：当前选择水平导航（默认）<!--导航栏--><ulclass="layui-nav"lay-filter=""><!--导航条目--><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-itemlayui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">社区</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){});</script>追加不同的CSS背景类可以呈现不同的颜色水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）//如定义一个墨绿背景色的导航<ulclass="layui-navlayui-bg-green"lay-filter="">…</ul>垂直导航&侧边导航垂直导航（不会布满整个左侧）只需在水平导航栏追加class：layui-nav-tree侧边导航（会布满整个左侧）需要追加class：layui-nav-tree、layui-nav-side<!--相比垂直追加layui-nav-tree类--><ulclass="layui-navlayui-nav-tree"lay-filter="test"><!--侧边导航:<ulclass="layui-navlayui-nav-treelayui-nav-side">--><liclass="layui-nav-itemlayui-nav-itemed"><ahref="javascript:;">默认展开</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">选项1</a></dd><dd><ahref="javascript:;">选项2</a></dd><dd><ahref="">跳转</a></dd></dl></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据男孩</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>导航添加图片及徽章元素<ulclass="layui-nav"><liclass="layui-nav-item"><!--添加一个徽章--><ahref="">控制台<spanclass="layui-badge">9</span></a></li><liclass="layui-nav-item"><ahref="">个人中心<spanclass="layui-badge-dot"></span></a></li><liclass="layui-nav-item"><!--添加一个图片--><ahref=""><imgsrc="//t.cn/RCzsdCq"class="layui-nav-img">我</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">修改信息</a></dd><dd><ahref="javascript:;">安全管理</a></dd><dd><ahref="javascript:;">退了</a></dd></dl></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>还有其他的导航栏请看官网
概述导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符，更多使用官网查看。官网：https://www.layui.com/doc/element/tab.html使用基础选项卡模板<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:30px;"><legend>默认风格的Tab</legend></fieldset><divclass="layui-tab"><!--选项卡标题--><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><!--选项卡内容--><divclass="layui-tab-content"><!--layui-show默认展示的选项卡--><divclass="layui-tab-itemlayui-show">1.高度默认自适应，也可以随意固宽。<br>2.Tab进行了响应式处理，所以无需担心数量多少。</div><divclass="layui-tab-item">大数据男孩2</div><divclass="layui-tab-item">大数据男孩3</div><divclass="layui-tab-item">大数据男孩4</div><divclass="layui-tab-item">大数据男孩5</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>三种风格默认风格：class="layui-tab"简洁风格：class="layui-tablayui-tab-brief"卡片风格：class="layui-tablayui-tab-card"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>默认风格</legend></fieldset><divclass="layui-tab"lay-filter="test"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show">点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>简洁风格</legend></fieldset><divclass="layui-tablayui-tab-brief"lay-filter="docDemoTabBrief"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>卡片风格</legend></fieldset><divclass="layui-tablayui-tab-card"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>选项卡的相关动态操作（删除，添加…）请看官网
概述进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。官网：https://www.layui.com/doc/element/progress.html使用进度条的实现原理就是大Div包裹小Div主要使用的类：class="layui-progress"大Divclass="layui-progress-bar"小Div默认风格<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:20px;"><legend>默认风格的进度条</legend></fieldset><!--大Div没有定义宽度--><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="40%"></div></div><!--定义大Div的宽度--><divstyle="margin-top:15px;width:300px"><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="70%"></div></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>不同颜色官方是提供了这几种颜色，可以自己定义颜色是定义在小Div里面<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>更多颜色选取</legend></fieldset><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-red"lay-percent="20%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-orange"lay-percent="30%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-green"lay-percent="40%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-blue"lay-percent="50%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-cyan"lay-percent="60%"></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>大尺寸进度条只用类：class="layui-progresslayui-progress-big"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>大尺寸进度条</legend></fieldset><divclass="layui-progresslayui-progress-big"><divclass="layui-progress-bar"lay-percent="20%"></div></div>显示文本的进度条大Div需要加入值lay-showpercent="true"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin:50px030px;"><legend>显示进度比文本</legend></fieldset><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="20%"></div></div><br><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="5/10"></div></div><br><divclass="layui-progresslayui-progress-big"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="70%"></div></div><br>正如你上述看到的，除了百分数，还支持分数（layui2.1.7新增）<br>大进度条文字显示在进度条内，小进度条在外面<script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>动态进度条请查看官网
概述向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。官网：https://www.layui.com/doc/element/button.html使用<buttontype="button"class="layui-btn">一个标准的按钮</button><ahref="https://bigdataboy.cn"class="layui-btn">一个可跳转的按钮</a>主题不同颜色风格的按钮名称组合默认class=”layui-btn”原始class=”layui-btnlayui-btn-primary”百搭class=”layui-btnlayui-btn-normal”暖色class=”layui-btnlayui-btn-warm”警告class=”layui-btnlayui-btn-danger”禁用class=”layui-btnlayui-btn-disabled”尺寸按钮的大小样式尺寸组合默认class=”layui-btn”大型class=”layui-btnlayui-btn-lg”小型class=”layui-btnlayui-btn-sm”迷你class=”layui-btnlayui-btn-xs”特殊样式按钮的圆角，图标，流体按钮（最大化适应）样式组合默认class=”layui-btn”圆角class=”layui-btnlayui-btn-radius”图标class=”layui-btnlayui-icon”流体按钮class=”layui-btnlayui-btn-fluid”<divclass="layui-row"><buttontype="button"class="layui-btnlayui-btn-warm"><iclass="layui-icon"></i>添加</button><!--暖色图标按钮--><buttontype="button"class="layui-btnlayui-btn-warmlayui-iconlayui-icon-add-1">添加</button></div>按钮组按钮组与按钮容器的差别在于按钮之间的间距<!--按钮组包裹在layui-btn-group类中--><divclass="layui-btn-group"><buttontype="button"class="layui-btn">增加</button><buttontype="button"class="layui-btn">编辑</button><buttontype="button"class="layui-btn">删除</button></div>按钮容器按钮组与按钮容器的差别在于按钮之间的间距<!--按钮容器包裹在layui-btn-container类中--><divclass="layui-btn-container"><buttontype="button"class="layui-btn">按钮一</button><buttontype="button"class="layui-btn">按钮二</button><buttontype="button"class="layui-btn">按钮三</button></div>事件监听使用Jquery来为按钮添加各种事件<buttontype="button"id="btn"class="layui-btnlayui-btn-normal">圆形百搭按钮</button><script>var$=layui.jquery;$('#btn').click(function(){layer.alert("大数据男孩")})</script>