- 博客(27)
- 收藏
- 关注
RSS订阅翻译 canvas+javaScript+css+html——五子棋
感觉这是个略有bug的五子棋，因为永远赢不了人机..效果如图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五子棋</title> <style type="
2018-06-14 20:08:18
618
1
翻译 canvas+javaScript+html——绘制矩形、斜线、圆、字体、渐变
通过canvas画布绘制如下图形：效果如图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas</title> <script type="te
2018-06-14 19:58:21
1828
翻译 javaScript——测试js是单线程、Object构造函数、js两道面试题
一、测试js是单线程：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js是单线程</title> <script type="text/javascript&am
2018-06-14 19:47:11
333
翻译 javaScript——对象字面量模式、工厂模式
一、对象字面量模式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对象字面量模式</title> <!--事先知道对象的内容有哪些--> &
2018-06-14 19:36:53
272
翻译 javaScript+html——定时调度、延时调用
一、定时调度：效果：定时器从0~9：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时调度</title> <script type="text/javascri
2018-06-14 19:24:56
3491
翻译 javaScript+html——js原型、原型链、原型链属性、显式原型和隐式原型
一、原型：<head> <meta charset="UTF-8"> <title>原型</title> <script type="text/javascript"> function Fun() {}; // console.log(Fun.prototype);//ob
2018-06-14 11:49:40
381
翻译 javaScript——BOM浏览器对象模型
主要包含console.log(navigator);/*有关访问者浏览器的信息*/console.log(location);/*取到浏览器的URL地址信息*/console.log(history);/*浏览历史记录*/效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta chars...
2018-06-13 20:11:21
215
翻译 javaScript+jQuery+css+html——图片剪切效果（上下左右）
效果如下：html中：<!DOCTYPE html><html lang="zh-cn"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>效果图</title&a
2018-06-13 19:53:37
587
原创 javaScript+css+html——图片剪切效果（只能向右进行剪切）
效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片剪切</title> <style type="text/css">
2018-06-13 19:35:32
1223
原创 javaScript+css+html——通过鼠标进行图片拖动
具体效果需要自己试，可将div换成图片、图标。这里用div:代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片拖动</title> <style type=&qu
2018-06-13 19:10:00
7764
原创 javaScript+css+html——图片随鼠标移动
具体效果需要自己测试，也可以将div换成图片之类的。这里用的div：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片随鼠标移动</title> <style t
2018-06-13 19:05:12
389
原创 javaScript+css+html——键盘事件（通过键盘上下左右控制图形位置）
该篇效果需要自己去试，测试的时候通过键盘上面的上下左右来控制图形的位置即可，可通过这个内容尝试做俄罗斯方块。通过switch case语句控制所选方向。效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键
2018-06-13 18:55:14
7682
原创 javaScript+css+html——鼠标滚动事件（通过滚动鼠标控制图形的长短）
注意：测试时鼠标一定要放在图形上。效果如下：①当鼠标往上滚动：②当鼠标往下滚动：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚动事件</title> <st
2018-06-13 18:43:50
2703
原创 javaScript+css+html——DOM操作css（协议阅读效果）
这一篇功能是：只有当滚动条滑动到页面底部时才能点击复选框选择，进而才能点击“下一步”按钮。这是一篇略有bug的代码，一是兼容性似乎有点问题，二是点击复选框时恐怕是要将页面放大才能进行选择..具体效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2018-06-13 18:26:38
1485
原创 javaScript+html——DOM增删改
利用JavaScript实现html中数据的增删改，注意第三和第四个按钮在同一页面中不能同时进行。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM增删改</title>
2018-06-13 09:45:13
240
原创 javaScript+css+html——多张图片的上下翻页+开始暂停自动翻页
主要是实现图片轮换的上一张、下一张功能，这里对样式不做多的设计。主要效果如下：
2018-06-12 17:08:34
7136
原创 如果你的每个梦 都觉得匆忙
人总要在某一个地方，找到内心的满足。如果满足不了，那恐怕也不再强求了。所以啊！在你不涉及的另一块，我还是要努力！靠自己吧，加油。
2018-06-12 10:29:01
163
原创 css3+html5——拼接图片中icon的使用、照片轮换（没写完）、视频、音频的加入
emmm...这一篇其实挺杂的，还是留着给自己看吧...大概效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻</title> <style type=
2018-06-11 19:26:29
653
原创 css3+html5——新闻列表设计
随便写了个仿腾讯新闻列表，主要是布局和标题栏的设计（不随页面滚动而滚动）、当鼠标移动到图片上的时候实现图片的放大功能：大概效果如下： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻列表</
2018-06-11 19:10:55
20758
1
原创 css3+html5——嫦娥奔月
先为大家提供两张照片： 效果如下： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>嫦娥</title> <style type="text
2018-06-11 17:24:28
884
原创 css3+html5——跳动的气球
先为大家提供一张.png格式气球的图片：效果图如下： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跳动的气球</title> <style type=&
2018-06-11 17:17:25
2766
1
原创 css3+html5——摆动的钟表
先为大家提供两张钟表和指针的图：（具体大小需要自己下去调） 然后是效果图： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>摆动的钟表</title> &a
2018-06-11 17:04:39
1577
原创 css3+html5——图片旋转
简单阐述一下：当鼠标移到图片上时，首尾两张图片实现分别向两边旋转功能。（图片大家可以自己选择）起初页面效果如下：当鼠标移动到图片上时效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片旋转<
2018-06-11 16:53:10
4064
原创 css3+html5——按钮篇
本篇包含了按钮的几种定义方法（包括默认按钮、链接定义的按钮、输入框定义的按钮、div定义的按钮）；也随便写了几个3D按钮（包括悬停变色按钮、阴影按钮、悬停出现阴影按钮、禁用按钮、箭头标记按钮、点击波纹按钮、按压效果按钮）也是做得比较丑，不过需要都话格式可以自己再调一下，大概效果如下：<!DOCTYPE html><html lang="en"><head>...
2018-06-11 10:50:31
10775
1
原创 css3+html5——.png格式和.jpg格式图片的区别+返回顶部设计
刚开始写网页时觉得插入图片能够用就行了，根本不管图片格式，今天才知道原来网页中.png和.jpg格式的图片的使用是有一定区别的，相见恨晚啊..后面是个小彩蛋：固定位置返回顶部设计...eg:1）.png:支持透明，颜色比较广，比较常用；2）.jpg:不支持透明。案例：<!DOCTYPE html><html lang="en"><head> <...
2018-06-10 11:46:11
3594
原创 css3+html5——纵向菜单
emmm...做的比较丑...<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>横向菜单</title> <style type="text/css"&am
2018-06-10 11:16:51
3417
原创 css3+html5——机器猫哆啦A梦+手、脚、头动起来！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>机器猫</title> <style type="text/css"> *{
2018-06-10 10:46:30
4616
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人