html
关注
分享
扫一扫
文章平均质量分 93
雕琢时光纸戆
这个作者很懒，什么都没留下…
展开
-
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 · 748 阅读 · 0 评论 -
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 · 456 阅读 · 0 评论 -
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 · 227 阅读 · 0 评论 -
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 · 267 阅读 · 0 评论 -
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 · 254 阅读 · 0 评论 -
canvas基础一
一些关于画布的基础知识，一些小的效果在以后会写一些我写在一起了，可以分别来练一练<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>canvas基础知识掌握</title> <style type="text/css"> ...原创 2019-11-19 20:54:24 · 140 阅读 · 0 评论 -
用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 · 721 阅读 · 0 评论 -
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 · 516 阅读 · 0 评论 -
js结合localStorage紫萼一个简陋的记事本
没有写样式，感兴趣的的可以去antd或者bs上拿点样式主要点将你输入的内容永久的存下并填充到页面，稍微难点的是获取事件并将其转化为自己想要的格式代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...原创 2019-10-30 21:14:07 · 278 阅读 · 0 评论 -
用js做一个简单的计算器
实现并不困难1，我们首先把样式写出来2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。3，对于清零，取反，取百分数代码中有详细说明。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...原创 2019-10-29 13:49:00 · 1788 阅读 · 0 评论 -
加载缓冲效果实现js
在获取数据前开始加载，填充到页面后让加载效果消失<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; pad...原创 2019-10-27 13:15:19 · 474 阅读 · 0 评论 -
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 · 478 阅读 · 0 评论 -
懒加载和浮现导航条的js基础代码
获取屏幕的scrollY，当屏幕大于一定的数值时，让原本不现实的内容让他显示，懒加载是再加上一些动画，让他逐渐浮现。有一些无用的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...原创 2019-10-25 20:13:10 · 262 阅读 · 0 评论 -
鼠标拖动小方块（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 · 430 阅读 · 0 评论 -
轮播图（点击小点点让他跳转到具体某一张）
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...原创 2019-10-25 16:02:35 · 1654 阅读 · 0 评论 -
js入门 （用wasd来移动一个小色块）
获取你的事件按钮之后，就可以根据键位来改变小色块的位置。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...原创 2019-10-23 22:43:39 · 849 阅读 · 0 评论 -
随即颜色旋转立方体
这是一个手写的小 效果先写一个立方体之后我们在每个面用table tr td标签写出每个面的小圆，之后再js中便利每一个小圆，遍历之后每个面随机选出一些来给他颜色。注意要清除原先的颜色。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>...原创 2019-10-22 21:04:02 · 213 阅读 · 0 评论 -
js打印九九乘法表
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> //双重for循环打印矩...原创 2019-10-17 22:14:50 · 195 阅读 · 0 评论 -
实现轮播图二
<!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 · 197 阅读 · 0 评论 -
结合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 · 158 阅读 · 0 评论 -
结合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 · 216 阅读 · 0 评论 -
轮播图纯代码原理
核心就是很简单的两个方法。加上事件和样式就完成了轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> </style> &...原创 2019-10-16 14:10:27 · 278 阅读 · 0 评论 -
旋转相册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 · 154 阅读 · 0 评论 -
选项卡
查看<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米选项卡</title> <style type="text/css"> * { margin: 0px; padding: 0px; }...原创 2019-10-13 11:39:31 · 188 阅读 · 0 评论 -
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 · 143 阅读 · 0 评论 -
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 · 174 阅读 · 0 评论 -
用伪元素写奥运五环
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>五环</title> <style type="text/css"> * { margin: 0px; padding: 0px; } ...原创 2019-10-11 15:38:11 · 174 阅读 · 0 评论 -
伪元素做一个跳动的方块
位置<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; }...原创 2019-10-11 14:31:20 · 242 阅读 · 0 评论 -
简单写一下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 · 244 阅读 · 0 评论 -
用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 · 274 阅读 · 0 评论 -
HTML写一个登录框样式
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。写好之后是这个样子下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...原创 2019-09-19 18:57:21 · 14121 阅读 · 1 评论