文档(Document) 和 对象(Events)

写了那么多实例, 最近有同学反应讲一点DOM 和 事件相关方面的基础知识. 可能有些还没有入门, 需要补充点基础知识. 从今天开始, 我们开始讲解一些基本的JS知识.文档和事件, 在Javascript中是必不可少的一部分, 他们的作用就是与用户进行交互的技术. 而进行交互, 就得谈到用户体验上去了, 用户体验设计得好, 你的用户就会停留在这里. 所以浏览器会允许前端编程者去控制浏览器里已有的对象结构. 其实就是编程了.在这个章节我们就学习在页面上怎么去操作他们.不过首先我们来看下接下来要讲的知识点:1. 浏览器的全局环境主要是了解浏览器中有哪些全局对象供我们编程的人去调用和使用, 通过这些全
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-09 09:21:21.0

模仿iphone里常用的弹出框

弹出框样式, 现在每个网站可能都会有自己独特的样式. 又好看的, 也有酷炫的. 我们现在常接触到的Iphone弹出框就是一个非常简单漂亮的样式.在HTML中实现这个样式, 这里我们设置了一个遮罩层, 然后显示弹出框.所以结构就是代码名称<div class="ios-alert">  <div class="ios-alert-cover"></div>  <div class="ios-alert-pop">        &
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-07 09:39:26.0

CSS自定义复选框按钮样式-绿色复选框

HTML自带的复选框或者单选框按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美化他们. 以前可能需要借助JS的实现. 现在CSS也可以完全实现我们想要的效果.我们直奔主题. 首先想到的是, 复选框需要的是一个背景色, 然后就是一个复选框选中的状态.选中状态我们这里用 "勾号" 来表示. HTML就可以简单的表示了代码HTML<div class="i-check">       <input type="checkbox" value
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-04 11:40:07.0

10年学习的GOLANG语言笔记

每个编程的人应该都有学习了某种编程语言, 到最后都没去使用的吧! 可能是出于某种原因, 或者是工作上的不需要, 或者又没有时间....对于Golang学习后, 我没有去使用, 主要是前期能帮助我写的东西太少, 有些地方写着写着又不能通过Golang去解决. 慢慢只好作罢!下面是一些笔记. 现在对于Golang, 已经陌生了! 现在应该是能做大部分事情了吧! 似乎现在行业内, 多了很多框架出来!对于Golang来说, 在这里现在只做一些笔记, 我想大家也有自己喜欢的编程方式, 然后可能因为种种情况, 而暂时放下. 做程序的人不容易吧. 学了却又时候不能使用. 现在我们来吐槽一下, 看看大家的经历
吴统威 on 编程语言 | 2016-03-03 10:47:24.0

Javascript表单密码的隐藏和显示

其实这个效果, 是确保用户输入的密码是否正确的一个功能. 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称.代码名称<div class="pass-box">  <input type="password" name="pass"  />  <i  state=&qu
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-02 09:59:59.0

Javascript实现密码强度检测

密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作.首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条.代码名称<div class="vali_pass">    <h3>简单的密码强度检测</h3>    <input type="passwo
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-01 15:08:40.0

Javascript实现返回顶部按钮

一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部.那现在我们就来实现这么一个功能.这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top.代码名称<a href="#" class="top">顶部</a>然后设置其样式表:代码名称body {
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-28 10:28:22.0

Javascript实现搜索框的自动完成效果(二)

接着上一篇文章, 我们这篇文章来完成自动完成的JS效果. 我们来分析下, 其中的事件. 用户在输入框输入文字后, 将输入的文字与后台数据做查询, 查询到后返回给客户端, 然后将返回的数据显示在数据列表下.根据这个步骤, 我们首先是获取输入框标签, 给这个标签添加onkeyup事件代码名称 var ele_key = document.getElementById("key", 0, 0); ele_key.onkeyup = function (e) {     //处理事件 }这里我们模拟一个后台数据,
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-26 08:52:35.0

Javascript实现搜索框的自动完成效果(一)

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮.代码名称 <div class="search">         <input type="text" value="&quo
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-25 11:04:23.0

Hover动画之图标动画

紧接着上一篇文章, 继续我们的hover动画之路, 这篇文章主要是使用一个图标的hover动画效果.HTML代码结构如下代码HTML    <div class="hover">        <span class="icon">☆</span>        <span class="text">图标动画</span>    </div>然后
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-24 21:11:04.0