雕琢时光纸戆-优快云博客

原创队列————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 267

原创栈——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 219

原创 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 779

原创 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 483

原创 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 236

原创 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 283

原创 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 263

原创 canvas基础一

一些关于画布的基础知识，一些小的效果在以后会写一些我写在一起了，可以分别来练一练<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>canvas基础知识掌握</title> <style type="text/css"> ...

2019-11-19 20:54:24 153

原创用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 757

原创 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 529

原创 js结合localStorage紫萼一个简陋的记事本

没有写样式，感兴趣的的可以去antd或者bs上拿点样式主要点将你输入的内容永久的存下并填充到页面，稍微难点的是获取事件并将其转化为自己想要的格式代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...

2019-10-30 21:14:07 297

原创用js做一个简单的计算器

实现并不困难1，我们首先把样式写出来2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。3，对于清零，取反，取百分数代码中有详细说明。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...

2019-10-29 13:49:00 1802

原创加载缓冲效果实现js

在获取数据前开始加载，填充到页面后让加载效果消失<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; pad...

2019-10-27 13:15:19 502

原创 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 495

原创懒加载和浮现导航条的js基础代码

获取屏幕的scrollY，当屏幕大于一定的数值时，让原本不现实的内容让他显示，懒加载是再加上一些动画，让他逐渐浮现。有一些无用的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...

2019-10-25 20:13:10 268

原创鼠标拖动小方块（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 448

原创轮播图（点击小点点让他跳转到具体某一张）

轮播图的原理前几篇说过一些现在加上一些点点击让他轮播具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...

2019-10-25 16:02:35 1680

原创 js入门（用wasd来移动一个小色块）

获取你的事件按钮之后，就可以根据键位来改变小色块的位置。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...

2019-10-23 22:43:39 877

原创随即颜色旋转立方体

这是一个手写的小效果先写一个立方体之后我们在每个面用table tr td标签写出每个面的小圆，之后再js中便利每一个小圆，遍历之后每个面随机选出一些来给他颜色。注意要清除原先的颜色。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title&gt...

2019-10-22 21:04:02 219

原创 js打印九九乘法表

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> //双重for循环打印矩...

2019-10-17 22:14:50 211

原创结合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 226

原创实现轮播图二

<!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 213

原创结合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 172

原创轮播图纯代码原理

核心就是很简单的两个方法。加上事件和样式就完成了轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> </style> &...

2019-10-16 14:10:27 287

原创旋转相册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 169

原创选项卡

查看<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米选项卡</title> <style type="text/css"> * { margin: 0px; padding: 0px; }...

2019-10-13 11:39:31 202

原创 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 150

原创 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 193

原创用伪元素写奥运五环

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>五环</title> <style type="text/css"> * { margin: 0px; padding: 0px; } ...

2019-10-11 15:38:11 184

原创伪元素做一个跳动的方块

位置<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; }...

2019-10-11 14:31:20 259

原创简单写一下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 264

原创用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 293

原创小米卡的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 247

原创在登陆框中假如伪类效果

在登陆框中你点击或者将鼠标放到字体上面会出现不一样的样式，这是伪类我们只需要将该标签的样式后加一个伪类即可。 .wrap #form .input { height: 38px; width: 268px; box-sizing: border-box; padding: 10px; padding-right: 0px; margin-bot...

2019-09-22 16:01:00 139

原创一个简单的导航条

<!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 287

原创 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 484

原创固定宽度居中

一般的主题在页面足够大时（比主题要大），主题是会自动居中的。其实很简单，以上一篇的登录框为例QQ空间和这个登录框是会自动居中的。代码就是加一个div，让他margin左右auto就可以<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></tit...

2019-09-20 14:47:31 475

原创 HTML写一个登录框样式

以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。写好之后是这个样子下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...

2019-09-19 18:57:21 14246 1

空空如也

空空如也