前端
文章平均质量分 56
geekzsp
这个作者很懒,什么都没留下…
展开
-
JS 获取各种尺寸
屏幕分辨率的高和宽屏幕可用高和宽度浏览器窗口可视区域大小网页尺寸scrollHeight网页尺寸offsetHeight屏幕分辨率的高和宽window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位以像素计。 2. window.screen 对象在编写时可以不使原创 2016-07-22 15:58:00 · 398 阅读 · 0 评论 -
HTML5 canvas
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="html5/js/audio5.min.js" type="application/javascript"></script> <script src="http://apps原创 2016-08-11 11:27:02 · 429 阅读 · 0 评论 -
HTML5 Web存储 sessionStorage localStorage
sessionStorage :浏览器关闭会清除 localStorage:长时间保存api一致:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script></head><body>姓名:原创 2016-08-11 10:03:43 · 315 阅读 · 0 评论 -
HTML 拖拽效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #targetDiv { width: 300px; height: 300px; border: #4f原创 2016-08-11 09:56:20 · 678 阅读 · 0 评论 -
ajax 文件拖拽上传
客户端服务器端客户端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #filePost{ width: 300px; height: 300px; bo原创 2016-08-10 21:46:05 · 379 阅读 · 0 评论 -
HTML5 服务器推送事件(Server-sent Events)简单实例
客户端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="result"></div></body></html><script> var source=new EventSource("demo_sse.p原创 2016-08-10 18:28:52 · 818 阅读 · 0 评论 -
HTML5 WebSocket 简单实例
什么是WebSocketWebSocket 简单实例什么是WebSocketWebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 例如 网页的 一部分 需要 实时更新数据 如果用ajax 请求的话 需要 不断的建原创 2016-08-10 18:26:26 · 975 阅读 · 0 评论 -
AJAX 的简单实例 (JS实现 和JQuery 实现)
什么是AJAX原生JS实现AJAXJQuery实现什么是AJAXAsynchronous Javascript And XML”(异步JavaScript和XML)AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。原生JS实现AJAX function ajax() { //先声明一个异步请求对象原创 2016-08-09 22:34:01 · 578 阅读 · 0 评论 -
HTML5 Workder 使用实例
什么是WorkerWorkder 的简单使用什么是Worker当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 就是开辟了一个子线程 实现线程通信Workder 的简单使用1原创 2016-08-09 22:23:55 · 758 阅读 · 0 评论 -
CSS 改变 li 样式的三种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty原创 2016-07-18 08:23:06 · 10114 阅读 · 0 评论 -
CSS 最小高度
最小高度DEMO效果图最小高度就是 给div一个最小高度 内容 很少的时候 占据最小高度 多的话 自动拉伸 height: 50px; min-height: 50px; height: auto !important;ps: height 和min-height 保存一致DEMO<!DOCTYPE html><html原创 2016-07-18 08:37:15 · 1411 阅读 · 0 评论 -
基于JavaScript实现树形下拉框
的小伙伴们可以参考一下平时会经常遇到树形结构的问题,比如显示目录结构等。大多数情况下后台会返回这样的数据,如下:?12345678910111213[{ id: 19, pid: 0, name:'nodejs' },{ id: 20, pid: 19, name:转载 2016-11-09 20:30:00 · 6574 阅读 · 0 评论 -
JS 和Jquery 绑定事件
转载地址:http://www.itxueyuan.org/view/6338.htmlhttp://blog.csdn.net/topwqp/article/details/8561366 jquery 调用 click 事件 的 三种 方式第一种方式:[javascript] view plain co转载 2016-08-10 21:39:29 · 274 阅读 · 0 评论 -
JS中mouseover和mouseout多次触发问题如何解决
问题描述我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示。问题如下:1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化。?12转载 2016-08-15 21:59:59 · 3364 阅读 · 0 评论 -
JS+CSS 实现轮播图 (一)
效果图简单思路代码效果图简单思路:1 布局框架<!--主体--> <div class="banner"> <!--图片--> <div class="main"> <img src="" alt="" class="main_i"> </div> <!--按钮--> <div class="ctrl">原创 2016-07-26 08:43:55 · 1061 阅读 · 0 评论 -
JS 实现简单星星评分功能
思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document示例</title></head><body onload="test()"><table id ="czy"> <tr>原创 2016-07-26 19:29:38 · 8054 阅读 · 1 评论 -
JS+CSS 实现 悬浮滚动广告
效果图思路代码效果图:思路:布局一个绝对布局的div 写一个move方法改变div的left 和top值 需要注意 到达body边界时候 改变方向 然后设置定时器调用move方法 不断改变 left和top值代码:<html lang="en"><head> <meta charset="UTF-8"> <title>移动的小广告</title></head><bod原创 2016-07-27 20:42:34 · 2289 阅读 · 1 评论 -
JS+CSS 实现 悬停广告
效果图第一种第二种封装效果图第一种在onscroll方法中调用move方法 move方法中直接设置广告top为body卷曲的高度 缺点:没有缓慢移动的效果<html lang="en"><head> <meta charset="UTF-8"> <title>移动的小广告</title></head><body onscroll="move()"><textare原创 2016-07-28 10:31:49 · 1458 阅读 · 0 评论 -
JS 省市联动
效果图思路代码效果图思路1.数据准备: provinceArr数组保存省份信息 cityArr是一个二维数组保存每个省份城市信息,并且第一个元素都是省份。 2 js实现 遍历privinceArr 将数据写入第一个select 下拉框 在这个下拉框的onchage事件中 获取 选择的数据 遍历cityArr 找到该省份 下的城市并写入代码<!DOCTYPE html><html原创 2016-07-29 09:49:08 · 717 阅读 · 0 评论 -
JS+DIV 实现拖动效果
效果图思路代码优化封装以及解决拖动问题事件捕获效果图思路代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="main" style="background-color: aqua;width: 100px;hei原创 2016-07-28 20:59:00 · 19401 阅读 · 3 评论 -
纯CSS实现Tab切换 以及 CSS+JS实现Tab切换
纯CSS实现Tab切换效果图思路代码CSSJS实现Tab切换效果图思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 (让所有的子div都重叠在一个地方) 然后全部隐藏 在li的hover 时使其显示代码:<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2016-07-29 15:52:12 · 2492 阅读 · 0 评论 -
淘宝放大镜效果
效果图原理代码效果图原理代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title></head><body><div id="left" style="width: 400px;height: 400px; float: left;cursor: move" >原创 2016-07-29 19:18:12 · 421 阅读 · 0 评论 -
JS+DIV 实现轮播图(二) (慕课网 学习笔记)
效果图原理代码效果图:原理:这里和实现轮播图(一)的原理差不多 只不过 多了一些特效代码:<!DOCTYPE html><html lang="en"> <!--先布局出来 --> <!--整体一个div 里面 两个div 一个是主体--> <!--一个是控制栏--> <!--主体里面有多个子div 子div包括 img 和标题--> <!--控制栏里面也有对应的子div 包原创 2016-07-30 16:24:19 · 4832 阅读 · 1 评论 -
JS+DIV 实现轮播图(三)
效果图原理代码效果图原理:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; padding: 0px; }原创 2016-07-30 16:31:49 · 5305 阅读 · 1 评论 -
在网页上通过JS实现文本的语音朗读
摘要: 语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。1、接口定义http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字参数说明:lan=zh:语言是中文,如果改为lan=en,则语言是英文。ie=UTF-8:文转载 2017-07-27 16:21:50 · 37794 阅读 · 8 评论