- 博客(14)
- 收藏
- 关注
原创 api小案例:实现导航栏切换
页面效果:小伙伴们可自行添加css样式<body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障&l
2020-07-28 22:54:36
177
原创 封装一个动画函数
function fn(a, b, c) { console.log(c); console.log(b); // 先清除在执行 只保留一个定时器执行 clearInterval(a.ff) // a.ff 表示:谁的函数 动态的 a.ff = setInterval(function () { // 步长值要写在定时器的里面 // 把步长值改为整数 不要出现小数的问题 let step = (b - a.o
2020-07-28 22:45:59
165
原创 api小案例五:仿淘宝 侧边栏固定
页面效果:小伙伴们可自行补全css样式<div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="top w">头部区域</div> <div class="cont w">中间区域</div> <div class="main w">主体部分</
2020-07-28 22:39:55
275
原创 api小案例四:实现鼠标经过跟随,离开回归原位案例
实现效果:小伙伴们可自行不起 css 样式<div class="nav"> <span class="cloud"></span> <ul> <li class="current"><a href="#">首页</a></li> <li><a href="#">松狮</a></li&g
2020-07-28 22:28:58
183
原创 找出字符串中出现最多的字符和出现的次数
var str = 'abaasdffggghhjjkkgfddsssss3444343';var ss = {};// 空对象 for (var i = 0; i < str.length; i++) { // charAt() 方法从一个字符串中返回指定的字符。 var ch = str.charAt(i); // 如果ss[ch]有多个的时候,就加到第一个上面,如果只有一个就等于1 i
2020-07-19 20:07:00
694
原创 实现倒计时案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <scri
2020-07-19 19:52:52
250
原创 webApi小案例三:实现密码的显示与隐藏功能
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { .
2020-07-19 19:47:04
328
原创 webApi小案例二:实现在不同时间页面中出现不同内容
<title>Document</title> <style> img { width: 500px; } </style></head><body> <img src="images/thunder.jpg" alt=""> <div id="d">上午好</div> <script>.
2020-07-19 19:40:11
260
原创 webApi小案例一:点击按钮实现图片切换
<title>Document</title> <style> img { width: 600px; } </style></head><body> <button id="lf">蒙奇D路飞</button> <button id="sl">诺诺罗亚索隆</button> <d.
2020-07-19 19:35:06
606
1
原创 冒泡排序
<script> // 创建数组 var str = [2, 4, 3, 5, 1, 7, 6]; /* 冒泡排序:实现让数组里的值从大到小或从小到大排列(冒泡排序也是一种算法) 代码实现: 1.因数组中的元素存在不确定性(前后值大小不同) 2.用双重for循环实现 上面数组里的值的 排列 3.外部循环实现
2020-07-13 22:21:37
113
原创 循环实现简易Atm存取款查询余额案例
思路:1.用户输入第几个序号就弹出相应的内容2.用户输入4时,退出switch,为了在退出switch后不再弹出请求,在switch外用 if 判定用户输入的序号是否为 4 等于 4 就退出整个循环3.为什么用while而不用for循环:while循环是在条件表达式为真的前提下 循环执行 指定 的一段代码 for循环是把某些代码循环若干次 一般跟计数器有关var money = 100; // 已经有的钱 // 利用while循环 判断(while 在判断条件为真的时候才会执行)
2020-07-12 16:16:41
1308
1
原创 JavaScript中的数据类型及表达方式
字符串型:string1.表现形式为:带引号的(单引号或者双引号)如:“张三”、'李四’.length 用来判断字符串长度var a = '张三李四王五'; console.log(a.length); // 记住 变量名与length之间用 . 隔开转义符\n 换行\ \ 斜杠 \ ' ' 单引号 " ”双引号 \t tab 缩进
2020-07-10 22:43:51
272
原创 flex布局的属性及其应用
flex布局也叫弹性布局 作为前端开发中最常用布局之一,它都有那些属性,有哪些特点,让我们来了解一下。flex布局的优缺点1.操作方便,布局简单,移动端使用比较广泛2.PC端支持情况较差3.IE低版本不支持flex以前要想把li标签在一行显示时,要给li加浮动,添加浮动后可能会对下面的内容产生影响(很麻烦)。 当我们学习了flex布局以后就会发现,原来要想让li在一行显示,并不影响其他元素是这样的simplenessflex属性在flex布局中也有X和Y轴flex-direction 设置
2020-07-07 22:28:54
480
原创 2D和3D转换
转换(transform)transform 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。要想学好2D和3D转换要先对 坐标 有一定了解2D2维坐标系2D转换中的 属性在使用转换是我们要先给元素添加转换属性 transform(x,y),X代表X轴,Y代表Y轴1.移动 translate当我们要移动盒子时,可以给盒子添加 transform:translate(50px,50px); 属性 让盒子做到移动效果(小括号里可以使用百分比%)2.旋转 r
2020-07-04 19:26:28
2432
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人