![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
zkelm.com
这个作者很懒,什么都没留下…
展开
-
挑战百日学习计划第59天,(热图animation)
热图标注点, 动态扩散效果 ,使用animation做思路如下:1.设置一个div 比如 city, 然后使用绝对定位absolute 定位到对应的城市名称之中然后分别做一个点 和三个圈, 分别设置绝对定位<div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2">.原创 2021-10-17 10:06:30 · 155 阅读 · 0 评论 -
挑战百日学习计划第54天,VUE之router(南宁点餐小程序开发)
要理解Vue的router,首先我们就要先理解2个单词1.routes 这里就是一个路由的规则 带S 说明是多个路由规则,主要作用是定义路径和对应的component组件2.router 就是路由器。它的作用就是根据routes的规则去执行分发首先先要定义一个路由规则 routesconst myroutes=[{path:'/foo',component:{template:"<b>FOO</b>"}},{path:'/bar',component:{tem原创 2021-07-22 02:36:11 · 191 阅读 · 2 评论 -
南宁小程序开发,挑战百日学习计划第52天(自适应导航条)
虽然看了Bootstrap的好几个实战教程,但是没操作过一遍,确实还是有点感觉不适应, 实战之中还是会出现一些乱七八糟的小问题,学Bootstrap 还是要做一些实例来对它语法的适应.广西南宁小程序开发定制:www.nasiot.com今晚弄了一个简单的bootstrap 导航条,代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bootstrap响应原创 2020-12-23 02:11:45 · 326 阅读 · 0 评论 -
小程序开发公司,挑战百日学习计划第34天(tad分栏制作)
南宁小程序开发公司:www.zkelm.com尽管每天都学一点,但是感觉进步还是有点慢。慢吞吞的有点像乌龟,咋搞咋搞,要达到目标值,好像时间挺不够用。穷是原罪,菜是原罪. 好吧 先学起来在说了,反正只要进步 就是好事!今天要做得就是Tad分栏。一个很使用的小组件功能, 纯JS操作,确实也是必备能力之一!前端的常用组件。1.要先有一定的css 布局基础 ,小组件需要的东西,其实是一种综合性的,如果没有对css 和js理解的话 看起来估计有点小难度,废话不多说,我们先做一个box 放入几个li.原创 2020-07-06 15:22:55 · 335 阅读 · 1 评论 -
小程序开发公司,挑战百日学习计划第33天(javascript Dom操作)
小程序开发公司:www.zkelm.com接下来准备学习10天左右的 javascriptDom操作,对javascript对 html元素的一种操作理解。 之后重新回到Vue 等框架开发上面去攻坚,很多东西看着挺理解,但是一做起来还是懵逼。而且我要是被卡住我就会一直挖。第1天的Dom操作教程, 以一个简单的 pink讲师的隐藏显示操作。如图点击之后就会隐藏掉内容首先我们下先要建立一个DIV来撞住这两个元素 div input p...原创 2020-07-04 10:16:39 · 1096 阅读 · 1 评论 -
小程序定制,挑战百日学习计划第32天(3D骰子制作)
猎人一直打猎发现太累了,他选择了布陷阱…,只要陷阱布置得多收益还是不错的,守株待兔也是一种策略。南宁创业公司,专业小程序开发:www.zkelm.com今天得教程就是把昨天的立体方块弄成一个骰子。在上面加入一些点 结合上次的教程。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>3D立方块的制作</title> <style>原创 2020-07-01 15:42:40 · 308 阅读 · 0 评论 -
小程序定制,挑战百日学习计划第31天(3D骰子制作)
南宁创业小公司 专业做小程序开发 定制 www.zkelm.com本来只是想学一下flex得排版, 但是因为学了不理解,所以就跟着做一个骰子, 做了骰子就像让骰子动起来,动起来了, 感觉为什么不是3d呢。 所以又研究了几天做一个3d得骰子,【小程序定制:www.zkelm.com】这章的教程我要做一个3d得骰子,点击的时候,它就会旋转, 如图所示这个需要用到CSS 里面的3d transform-style:preserve-3d;首先要了解的 就是3D的坐标: 这点很重要,为了方便大家的.原创 2020-07-01 01:06:21 · 461 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第30天(flex布局-丢骰子)
【南宁小程序开发:www.zkelm.com】,学了CSS 之后 顺便接触了一些CSS3.0的语法,感觉css3.0更好玩。接下来准备画费有点时间去把CSS3.0撸一遍,看看到底是啥玩意 。我设计是这样子的:1.点击骰子 自动滚动到另外一边, 然后随机出现点数因为我用的是纯CSS写的, 所以想了两天,终于想到了好办法, 就是先布局7个点, 然后随机设置点的背景色=#DDD 这样子看起来。就是点数变化了, 而且还不影响骰子的排布变现。 hoho 真聪明!好咧 废话不多说,直接附上代码 cop原创 2020-06-25 16:37:54 · 368 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第29天(flex骰子布局教程2)
南宁小程序开发:www.zkelm.com骰子布局 4 5 6 三个点数的布局,要是使用到纵向布局的思路。所以用独立一个文章来做介绍。更方便大家理解已学习1.先干6个骰子的排版<div class="flexcontainer"> <div class="flexcolumn"> <div class="flexitems"></div> <div class="flexitems"></div> .原创 2020-06-24 16:20:28 · 322 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第28天(flex骰子布局教程)
生无可恋只想学编程 南宁小程序开发 www.zkelm.comflex布局骰子教程源码,我也是根据网上写的教程,巩固使用经验,废话不多数 开干Doing1.首先先制作一个骰子的模板 代码如下<body><head><title>骰子-一点布局居中</title><style>body{background:#000;}.box{ display:flex; width:90px; height:90px; bo.原创 2020-06-24 14:01:25 · 1136 阅读 · 1 评论 -
南宁小程序开发,挑战百日学习计划第27天(flex弹性布局6大属性)
弹性布局的6大属性,我这几天才搞明白,所以今晚顺便更新, 学习计划铁定是不能停止的,热爱学习不能自拔。哈哈最近我的网站已经可以被收录了。感觉挺不错!,就等百度给流量,开始把公司做大做强南宁小程序开发 www.zkelm.comflex 6大属性1.flex-directive:盒子的排序方向 row |row-reverse |column|column-reverse如图2.justify-content:定义了项目在主轴上的对齐方式justify-content:flex-start原创 2020-06-20 02:42:41 · 243 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第26天(flex弹性布局)
想不到坚持了那么久,往年的话这个时候我早就放弃了 哈哈,写日记对于一个程序员的进步来说,还是很实在的。现在每天在办公室吹着空调学习,感觉贼带劲! 还有小刘同学的陪伴 哈哈 舒服.【南宁小程序开发: zkelm.com】步入正题:我刚刚搞清楚了display的定位,float等,结果发现css的弹性布局才是主流,哎!前端真是要一直奔跑啊,头都大了我做事一丝不苟的态度,还是很费神的,不过小刘同学说得对,干就完了!花个一两天把弹性布局学透,前端不就七七八八了嘛 哈哈,南宁小程序开发,挑战百日学习计划原创 2020-06-18 02:20:31 · 247 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第25天(css 选择器)
常用的css 选择器:class .id #元素选择器p :所有p元素div,p :所有div+p元素div p :选择Div内的所有p元素, 包裹无限级 孙子级别等…div>p :选择父级是DIV的所有 p元素 记住:孙子辈不算div+p :选择所有紧接着div元素之后的p元素 (少用)属性选择器:[target] :选择所有带有target属性元素[target=blank] 选择所有 target=”blank“属性的所有元素[title~=m] 选择标原创 2020-06-17 17:22:13 · 324 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第24天(float的理解)
float理解float浮动规则:向指定方向移动。直到碰到包含它的元素(父元素)或则,同样float元素的边框,1.如果元素浮动则不会占空间,block 块状元素将会失去block的属性,变成inline-block属性。因为可以设置宽高,但以absolute的不占空间不同,float会影响周边元素如果float元素前面的非block元素, 而且在同一行.则浮动会影响到前面的元素,把它积到后面非BLOCK的边上<style>.box{width:400px;height:200px原创 2020-06-16 16:02:10 · 258 阅读 · 0 评论 -
南宁小程序开发,挑战百日学习计划第23天(relative和absolute的区别)
定位:绝对定位 absolute ,和相对定位relative 最大的区别最大的区别就是: relative 在位移的适合,没有脱离文档流,还会占据着以前的位置<style> #son1{ width:100px;height:100px;background:pink; } #son2{ width:100px;height:100px;background:yellow; position:relative;left:105px; } #son3{ width:10原创 2020-06-14 10:38:47 · 189 阅读 · 0 评论 -
挑战百日学习计划(南宁小程序开发)第22天(position定位)
要学小程序 前端是一个必须要跨过的坎,【南宁小程序开发:www.zkelm.com】position 定位position定位分5个:1.static (默认的文档流):由浏览器决定的,默认的排版模式 也是初始化的排版模式2.relative sbsolute fixedrelative absolute fixed 三个属性值都有一个一个共同点,就是相当于某个基点的定位, 不同的是在于基点的不同、所以 只要理解他们的基点是什么。就很容易掌握这三个属性值这三种定位都不会对其他元素的原创 2020-06-12 16:19:17 · 204 阅读 · 0 评论 -
挑战百日学习计划(南宁小程序开发)第21天(javascript this)
恭喜自己!最近谈下一单【小程序开发:www.zkelm.com】,非常开心,费用2w元,可以松一口气了,公司这个月有事情做了。而我又可以花时间学习升级一下自己,今天的知识点: thisjavascript This 关键字,指的是他的对象1.在方法中,this 指的是所有者对象person={ firstName:"南宁小程序开发", lastName:"www.zkelm.com", fullName:function(){ return this.firstName+原创 2020-06-11 02:06:49 · 240 阅读 · 0 评论 -
挑战百日学习计划(南宁小程序开发)第20天(javascript 闭包)
闭包的作用,阻止变量污染,1.不通过var 声明的变量 属于全局变量,即使他在函数内部,2.在函数内部用 var 声明的变量属于函数的私有变量,外部无法访问3.函数可以访问全局变量(函数以外的)生命周期:全局变量 只有在网页关闭才会销毁,而局部变量在函数运行完毕就会销毁...原创 2020-06-07 03:17:58 · 188 阅读 · 0 评论 -
挑战百日学习计划(南宁小程序开发)第19天(javascript 对象以及数组的区别)
没错!喝咖啡有108种好处! 如果你是一个程序员建议你喝点咖啡, 一次半杯最合适(雀巢咖啡 半条即可)函数:即是用function 关键字定义的,function text(){ alert("这是一个函数") }函数为代码块,需要调用才会执行<button onclick="text()">点击运行</button>匿名函数: 匿名就是没有名字的函数function(){alert(“你好啊!”)}...原创 2020-06-02 01:38:24 · 241 阅读 · 0 评论 -
挑战百日学习计划(南宁小程序开发)第18天(js对象)
爱好==>习惯==>上瘾==>依赖性成功1.对象的格式: 健:值2.必须是逗号分隔 ,,,,,,,3.对象的方法调用对象的值 用This 参数对象里面可以包含方法,即 functionobjectfunction:function(){ return this.xxx+this.yyy }对象代码实例<div id="app">默认值</div>var person={ last:"南宁小程序开发" ,原创 2020-06-01 02:21:01 · 218 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)第17天(getElementsByTagName)
方法最重要! 改变需要策略,成功也依然。 【南宁小程序开发:www.zkelm.com】,第17天 坚持笔记!大神请飘过, 小菜鸟请跟我一起飞翔。学会编程偶尔接点网上的订单也可以在疫情下活命。js是最有用的技术 对于前端而言 。var x=getElementsByTagName(“p”) 返回所有的p元素 集合x[0] x[1] … 访问模式x.length =返回数组的长度<div><z>1</z><br/><z>2原创 2020-05-27 03:32:25 · 265 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)第16天(addEventListener)
不知不觉堕落了一周多多, 现在重新开始!一个Js的事件监听代码 (addEventlistenter)Element.addEventListener(“click”,myfunction);<div id="app">www.zkelm.com</app><button id="mybtn">更改内容</button><script> document.getElementById("mybtn").addEventListen原创 2020-05-26 03:44:30 · 597 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)第15天(javascript操作Dom)
javascript操作Dom元素 增删操作在(小程序开发:www.zkelm.com)以后必然是前端的天下 ,前端则必不可少的要使用到javascript ,大量的框架封装,其实都离不开原生的javascript框架只是为了便捷我们操作而已。1.javascript添加Dom元素方法大致如下<div id="mydiv"></div><script> //1.先createElement 一个元素pvar para=document.createElem原创 2020-05-12 02:42:29 · 231 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)第14天(自定义指令directive钩子函数)
一个人如果闭上眼睛,走100米他都走不到,甚至会跌倒。 而睁开眼睛就可以很轻松做到,为什么呢? 缺少反馈机制。睁开眼睛你可以不断的接收到正确的反馈,从而你可以很轻松的走到目标,所以应该项目也是如此,一个好的计划必须要有每一步的反馈,这样子你才可以坚持走的下去,否则你到一半的时候就会犹豫甚至回头。内心的天平左右摇摆.本章知识点:Vue自定义指令directive 钩子函数挑战百日学习计划(小程序开发 www.zkelm.com)每天进步1% 热爱学习无法自拔 哈哈1.常用的Vue指令包含:v-mo原创 2020-05-10 02:02:08 · 265 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)第13天(自定义指令:directive)
前几天卡在一个知识点上,确实也没研究出来,无法透切,先由易到难吧,循环渐进,这个确实就是自学的最大问题, 碰到问题有时候一卡就是几天。前几天谈了一单。是一个美女做美容业的,准备(开发小程序:www.zkelm.com) 对方对我挺信任,感觉也挺好玩的. 废话不多说努力吧今天的知识点:Vue之 自定义指令 directiveVue 允许注册自己的指令 V-???? v-on v-bind v-model代码如下:<div id="app"> <p>注册dir原创 2020-05-09 01:43:59 · 380 阅读 · 2 评论 -
挑战百日学习计划(小程序开发)-第12天(Vue 自定义事件)
最近心得:如果你发现一个目标很大,你就要开始分步骤去分化它,把它分成很多小分, 一份份的完成,这样子你就会能坚持下去。 及时反馈机制是多巴胺分泌的最佳动力,所以。碰到大问题不要慌。 把他们分割!本章知识点:父元素传递参数到子元素 使用的是 props[] ,但是如果子元素要把数据传输到父元素,就要使用自定义事件。我们可以使用V-on 绑定自定义事件,每个Vue实例都实现了事件接口看了一天...原创 2020-05-08 02:17:09 · 223 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)-第11天(Vue 动态组件 Prop)
Vue动态props 如何实现动态的输入,并在component里面显示, 使用的办法是 v-bind 而 v-model绑定的必须是双向绑定<div id="app"> <input type="text" v-model:value="promsg"/> <zkelm v-bind:message="propmsg"></zkelm&g...原创 2020-05-04 02:46:50 · 826 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)-第10天(Vue组件component 组件传值)
每天进步1%。虽然公司已经有了,团队也有几个人,订单接了有15w左右,收款10w。为了把团队更好的带向 单片机,万物物联网的环境, 小团队也要有梦想。 所以我准备学习百日,从前端切入,再进入ai 和单片机等领域. 以下都是我每一天的学习小节点, 虽然简单, 但是温故而知新。就当复习吧Vue组件传值:props[] props:[‘message’]prop是子组件用来接收父组件传...原创 2020-05-03 16:46:17 · 954 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)-第9天(Vue组件component)
打卡:第9天 .今日心得:复杂的问题必须要分步完成,才可以化繁为简。一个知识点如果不理解透彻,会造成很多误区。最终就会被丢弃记忆每天进步1%,热爱学习不能自拔!虽然知识点不是很高深,但是先稳固基础的知识。循环渐进.争取在100天内能实现技术的质变!最终能实现(小程序开发:www.zkelm.com)的目标、今天的主题:Vue之 组件component1.component的创建(组件 既一个...原创 2020-05-03 04:02:11 · 255 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)-第8天(Vue表单)
打卡:第八天 .每天进步1%,热爱学习不能自拔!虽然知识点不是很高深,但是先稳固自己的知识。循环渐进.争取在100天内能实现技术的质变!最终能实现(小程序开发:www.zkelm.com)的目标Vue表单的理解:<div id="app"> <form action="#" method="get"> <textarea v-model="Mytex...原创 2020-05-02 02:40:40 · 262 阅读 · 0 评论 -
挑战百日学习计划(小程序开发)-第7天(v-on)
每天进步1%。 争取把知识点进行一个消化理解通透。为了能学会小程序开发,并顺利发展自己的公司,决心学习前端开发技术。 恶补知识点。争取在100天内能实现技术的质变!今天的知识点:vue v-on 的事件绑定: 绑定的对象有 submit click<div id="app" v-on:submit="divfun"> <form action="" v-on:subm...原创 2020-05-01 12:20:02 · 499 阅读 · 2 评论 -
挑战百日学习计划(小程序开发:www.zkelm.com)-第六天(v-for)
挑战百日学习计划,为自己做 【小程序开发:www.zkelm.com 】做技术积累,人没有梦想不足于慰平生。 准备先攻克前端,后进军ai 和单片机 ,以下都是我一个一个代码敲的实例, 希望对大家有帮助,写得不是很好 ,大神请飘过Vue v-for 循环 (常用于循环 数组 or 对象 )1.循环数组<div id="app"> <ul> ...原创 2020-04-29 21:35:28 · 261 阅读 · 0 评论