十二Tel-CSDN博客

翻译 canvas+javaScript+css+html——五子棋

感觉这是个略有bug的五子棋，因为永远赢不了人机..效果如图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五子棋</title> <style type=&quot

2018-06-14 20:08:18 538 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 1652

翻译 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 262

翻译 javaScript——对象字面量模式、工厂模式

一、对象字面量模式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对象字面量模式</title>  &

2018-06-14 19:36:53 242

翻译 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 3401

翻译 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 315

翻译 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 176

翻译 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 513

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

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

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

原创 javaScript+css+html——键盘事件（通过键盘上下左右控制图形位置）

该篇效果需要自己去试，测试的时候通过键盘上面的上下左右来控制图形的位置即可，可通过这个内容尝试做俄罗斯方块。通过switch case语句控制所选方向。效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键

2018-06-13 18:55:14 7551

原创 javaScript+css+html——鼠标滚动事件（通过滚动鼠标控制图形的长短）

注意：测试时鼠标一定要放在图形上。效果如下：①当鼠标往上滚动：②当鼠标往下滚动：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚动事件</title> <st

2018-06-13 18:43:50 2622

原创 javaScript+css+html——DOM操作css（协议阅读效果）

这一篇功能是：只有当滚动条滑动到页面底部时才能点击复选框选择，进而才能点击“下一步”按钮。这是一篇略有bug的代码，一是兼容性似乎有点问题，二是点击复选框时恐怕是要将页面放大才能进行选择..具体效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

2018-06-13 18:26:38 1396

原创 javaScript+html——DOM增删改

利用JavaScript实现html中数据的增删改，注意第三和第四个按钮在同一页面中不能同时进行。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM增删改</title>

2018-06-13 09:45:13 193

原创 javaScript+css+html——多张图片的上下翻页+开始暂停自动翻页

主要是实现图片轮换的上一张、下一张功能，这里对样式不做多的设计。主要效果如下：

2018-06-12 17:08:34 6970

原创如果你的每个梦都觉得匆忙

人总要在某一个地方，找到内心的满足。如果满足不了，那恐怕也不再强求了。所以啊！在你不涉及的另一块，我还是要努力！靠自己吧，加油。

2018-06-12 10:29:01 136

原创 css3+html5——拼接图片中icon的使用、照片轮换（没写完）、视频、音频的加入

emmm...这一篇其实挺杂的，还是留着给自己看吧...大概效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻</title> <style type=

2018-06-11 19:26:29 609

原创 css3+html5——新闻列表设计

随便写了个仿腾讯新闻列表，主要是布局和标题栏的设计（不随页面滚动而滚动）、当鼠标移动到图片上的时候实现图片的放大功能：大概效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻列表</

2018-06-11 19:10:55 20338 1

原创 css3+html5——嫦娥奔月

先为大家提供两张照片：效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>嫦娥</title> <style type="text

2018-06-11 17:24:28 809

原创 css3+html5——跳动的气球

先为大家提供一张.png格式气球的图片：效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跳动的气球</title> <style type=&amp

2018-06-11 17:17:25 2637 1

原创 css3+html5——摆动的钟表

先为大家提供两张钟表和指针的图：（具体大小需要自己下去调）然后是效果图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>摆动的钟表</title> &a

2018-06-11 17:04:39 1518

原创 css3+html5——图片旋转

简单阐述一下：当鼠标移到图片上时，首尾两张图片实现分别向两边旋转功能。（图片大家可以自己选择）起初页面效果如下：当鼠标移动到图片上时效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片旋转<

2018-06-11 16:53:10 3991

原创 css3+html5——按钮篇

本篇包含了按钮的几种定义方法（包括默认按钮、链接定义的按钮、输入框定义的按钮、div定义的按钮）；也随便写了几个3D按钮（包括悬停变色按钮、阴影按钮、悬停出现阴影按钮、禁用按钮、箭头标记按钮、点击波纹按钮、按压效果按钮）也是做得比较丑，不过需要都话格式可以自己再调一下，大概效果如下：<!DOCTYPE html><html lang="en"><head>...

2018-06-11 10:50:31 10614 1

原创 css3+html5——.png格式和.jpg格式图片的区别+返回顶部设计

刚开始写网页时觉得插入图片能够用就行了，根本不管图片格式，今天才知道原来网页中.png和.jpg格式的图片的使用是有一定区别的，相见恨晚啊..后面是个小彩蛋：固定位置返回顶部设计...eg:1）.png:支持透明，颜色比较广，比较常用；2）.jpg:不支持透明。案例：<!DOCTYPE html><html lang="en"><head> <...

2018-06-10 11:46:11 3491 2

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

原创 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 4451 1

十二tel