- 博客(38)
- 收藏
- 关注
原创 队列————JavaScript版实现
数据结构 用js实现队列html代码<!DOCTYPE html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./duilie.js"> </scri
2020-05-14 09:00:44
223
原创 栈——JavaScript版
数据结构之栈用JavaScript来实现<!DOCTYPE html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./zhan.js"></script
2020-05-13 23:54:30
189
原创 js手写一个视频播放h5
css代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
2019-11-24 22:01:34
731
原创 canvas代码雨效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,b...
2019-11-22 15:25:54
437
原创 canvas效果二———折线图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } html...
2019-11-22 14:29:04
213
原创 canvas效果一画线
css代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ...
2019-11-21 13:20:57
248
原创 canvas动画一流动的很多球
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- //画布 --> <canvas id="c" width="500" heig...
2019-11-19 20:58:45
237
原创 canvas基础一
一些关于画布的基础知识,一些小的效果在以后会写一些我写在一起了,可以分别来练一练<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>canvas基础知识掌握</title> <style type="text/css"> ...
2019-11-19 20:54:24
128
原创 用js手写一个简单的日历
代码中有注释<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>日历</title> <style type="text/css"> html,body{ background-color: antiquewhi...
2019-11-10 18:25:40
700
原创 js写一个钟表
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } html...
2019-11-01 16:05:36
503
原创 js结合localStorage紫萼一个简陋的记事本
没有写样式,感兴趣的的可以去antd或者bs上拿点样式主要点将你输入的内容永久的存下并填充到页面,稍微难点的是获取事件并将其转化为自己想要的格式代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...
2019-10-30 21:14:07
263
原创 用js做一个简单的计算器
实现并不困难1,我们首先把样式写出来2,写出来之后我们用js获取我们每次点击的数值,将其运算等等并将其填充到我们写的显示屏上。3,对于清零,取反,取百分数代码中有详细说明。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...
2019-10-29 13:49:00
1765
原创 加载缓冲效果实现js
在获取数据前开始加载,填充到页面后让加载效果消失<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; pad...
2019-10-27 13:15:19
452
原创 ajak 拉取json数据填充html
通过ajak方法访问文件,获取其中的数据,将其填充到HTML中 xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ var result = JSON.parse(xhr.response) console.log(result)...
2019-10-26 18:26:18
463
原创 懒加载和浮现导航条的js基础代码
获取屏幕的scrollY,当屏幕大于一定的数值时,让原本不现实的内容让他显示,懒加载是再加上一些动画,让他逐渐浮现。有一些无用的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
2019-10-25 20:13:10
246
原创 鼠标拖动小方块(js监听器)
代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0rem; padding: 0rem; } h...
2019-10-25 17:54:50
419
原创 轮播图(点击小点点让他跳转到具体某一张)
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播具体就是自己添加一个标签,获取之后知道他是哪一张进行显示就可以了。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
2019-10-25 16:02:35
1632
原创 js入门 (用wasd来移动一个小色块)
获取你的事件按钮之后,就可以根据键位来改变小色块的位置。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...
2019-10-23 22:43:39
820
原创 随即颜色旋转立方体
这是一个手写的小 效果先写一个立方体之后我们在每个面用table tr td标签写出每个面的小圆,之后再js中便利每一个小圆,遍历之后每个面随机选出一些来给他颜色。注意要清除原先的颜色。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>...
2019-10-22 21:04:02
197
原创 js打印九九乘法表
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> //双重for循环打印矩...
2019-10-17 22:14:50
182
原创 结合DOM树实现轮播图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>lunbotu</title> <style type="text/css"> *{ margin: 0px; padding: 0px; ...
2019-10-16 23:41:52
205
原创 实现轮播图二
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul{ list-style: none; } .item{ height:...
2019-10-16 23:35:38
185
原创 结合DOM树实现轮播图
操控行间标签属性来改变状态<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>lunbotu</title> <style type="text/css"> *{ margin: 0px; padding:...
2019-10-16 23:31:55
147
原创 轮播图纯代码原理
核心就是很简单的两个方法。加上事件和样式就完成了轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> </style> &...
2019-10-16 14:10:27
264
原创 旋转相册3
查看<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3d</title> <style type="text/css"> * { margin: 0px; padding: 0px; } ...
2019-10-13 13:53:24
141
原创 选项卡
查看<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米选项卡</title> <style type="text/css"> * { margin: 0px; padding: 0px; }...
2019-10-13 11:39:31
175
原创 3d小相册2
上一篇加入了伪类 鼠标放上去才会开始动画,这个自动的查看<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3d相册</title> <style type="text/css"> * { margin: 0p...
2019-10-12 19:28:51
125
原创 3d小相册1
查看代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3d相册</title> <style type="text/css"> *{ margin: 0px; padding: 0px; ...
2019-10-12 19:11:09
156
原创 用伪元素写奥运五环
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>五环</title> <style type="text/css"> * { margin: 0px; padding: 0px; } ...
2019-10-11 15:38:11
166
原创 伪元素做一个跳动的方块
位置<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; }...
2019-10-11 14:31:20
233
原创 简单写一下css2d动画效果
动画效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>科技</title> <style type="text/css"> *{ margin: 0px; padding: 0px; ...
2019-10-10 21:34:47
234
原创 用flex写筛子的各个面
用flex写小圆圈在一个方块里怎么布局。主要用到flex的justify-content: ;flex-wrap: ;align-items: ;等等挺简单的一些css<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>筛子</titl...
2019-10-10 20:30:29
259
原创 小米卡的css写法
先上图代码<head> <meta charset="UTF-8"> <title>小米</title> <style type="text/css"> body { background-color: gainsboro; } .wrap { background-color:...
2019-09-22 16:49:41
210
原创 在登陆框中假如伪类效果
在登陆框中你点击或者将鼠标放到字体上面会出现不一样的样式,这是伪类我们只需要将该标签的样式后加一个伪类即可。 .wrap #form .input { height: 38px; width: 268px; box-sizing: border-box; padding: 10px; padding-right: 0px; margin-bot...
2019-09-22 16:01:00
119
原创 一个简单的导航条
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>nav</title> <style type="text/css"> body{ background-color: gainsboro; } .wr...
2019-09-22 15:13:44
265
原创 360首页产品推荐
css写一个这样的简单样式。大体上就分为一个head和bodyhead写标题,body写下面的八个快快。首先那个最边上的小竖杠,我们可以用boder-left写也可以用一个span标签来写 <span id="green-line"> </span>.box .head #green-line{ position: absolute...
2019-09-20 17:32:56
458
原创 固定宽度居中
一般的主题在页面足够大时(比主题要大),主题是会自动居中的。其实很简单,以上一篇的登录框为例QQ空间和这个登录框是会自动居中的。代码就是加一个div,让他margin左右auto就可以<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></tit...
2019-09-20 14:47:31
442
原创 HTML写一个登录框样式
以QQ空间的登陆框为例,原先的代码很复杂,还涉及了其他的知识,对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。写好之后是这个样子下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...
2019-09-19 18:57:21
14028
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人