04 2017 档案

Css画圣诞树
摘要：今天看到一道有趣的css题，要求用html和css实现一个圣诞树（上面一个小三角，下面一个大三角，最下面是一个矩形）？ 你看到后脑子中的印象是什么呢，三角形的做法，还是什么，接下来看看我的制作过程。 TODO supply a title 圣诞树制作 ... 阅读全文
posted @ 2017-04-28 14:54 bonly-ge 阅读(1203) 评论(0) 推荐(0)
Float与position区别
摘要：名词解释 float：浮动，脱离文档流，但是会占据文档位置，浮动元素下方不能放置文档，但是可以放置其他块状元素（块状元素里面的文档不会被盖住而是被挤下来了），位于它的底层；顾名思义就是飘起来直到碰到块状元素的时候会停在当前位置，也可以给浮动元素添加左右外边距，但是边距内是不能放置其他元素。假如设置左浮动，我们在写文档的时候会首先在左浮动元素的右边写，宽度不够的情况下回换行。 position: 定... 阅读全文
posted @ 2017-04-28 14:23 bonly-ge 阅读(248) 评论(0) 推荐(0)
页内导航跳楼事件
摘要：目的：使用侧边栏实现业内导航。 思路：一种是通过a标签链接的方式，一种是通过jQuery通过控制滚动条的scrollTop值来进行控制。这里重点介绍JQuery的方式，先写静态页面，然后在通过规律写出jQuery语句。 布局如下（在这之前引用了清除列表样式文件和重置文件）： 1号车库 ... 阅读全文
posted @ 2017-04-26 22:32 bonly-ge 阅读(162) 评论(0) 推荐(0)
数字键切换图片
摘要：目的：通过数字键实现切换图片功能。 思路： 首先要有两个容器来放置图片（这里用数字来代替）和数字编码，并设置相应的Css样式，样式设置时需要注意ol的定位父级是div,同时div还应该设置超出部分隐藏， 数字键的样式要通过 cursor: pointer;呈现手指状，这样基本样式就出来了，接下来是jQuery部分，点击数字键1图片1显示，点击数字键2图片2显示……这时候需要有一个click事件... 阅读全文
posted @ 2017-04-26 14:16 bonly-ge 阅读(283) 评论(0) 推荐(0)
初级前端面试题
摘要：用css实现点击按钮图片切换。 思路：用css实现图片切换效果，我们需要用一个足够宽的div装图片，用一个div来显示图片，宽度应该和图片大致一样，超出部分隐藏，设置里面的div（也可以用ul li ）左浮动，使其横向排列；每个图片设置两个按钮，一个是向前，一个是向后都用a标签包起来，这样就可以跳转 阅读全文
posted @ 2017-04-25 11:11 bonly-ge 阅读(270) 评论(0) 推荐(0)
按钮选择、样式改变
摘要：案例一：目的：通过按钮实现全选、全不选、反选等功能。 思路：第一步：根据标签数设置input标签，根据按钮数设置bottom标签进行布局；第二步：Js 需要判断每一个input标签是否为真值，全选的时候为真值，全不选的时候为假值，反选的时候需要用到if判断，如果为真则为空，否则为假，采用下角标的方式，inpt[i]的方式 来判断，检查checked的值。 代码如下： 请选择你要... 阅读全文
posted @ 2017-04-24 16:51 bonly-ge 阅读(695) 评论(0) 推荐(0)
Date应用计时器和倒计时
摘要：计时器应用 目的：通过date设置一个计时器，实现图一效果，点击按钮开始计时，小时数、分钟数、秒数分别放到不同的表格中显示，中间用冒号相隔。 思路：第一步布局，要有3个input标签用来放置小时数、分钟数、秒数；要设置i、j、k三个变量来放置这三个value值，要有一个button按钮用来触发点击事件，还要一个计时器setInterval(function(){},1000);用来计时。 注意事项... 阅读全文
posted @ 2017-04-23 22:40 bonly-ge 阅读(321) 评论(0) 推荐(0)
Date应用-显示日期
摘要：目的：在页面上显示当前计算机的时间。 思路：布局：在body上设置div用来显示当时的时间值，js里应该能获取当前时间并能赋值给div。 知识点：第一步：获取div的id用来写入 var box=document.getElementById("box"); 获取当前时间会用到 var d=new date; 获取年、月、日、时、分、秒会用到getFullYear() 、getMonth(... 阅读全文
posted @ 2017-04-23 19:50 bonly-ge 阅读(289) 评论(0) 推荐(0)
正则表达式—简单验证
摘要：目的：通过正则表达式验证电话、密码、QQ、邮箱等是否正确。 思路：第一步布局要有文本输入框用来输入文本，要有一个登录按钮；第二步要获取文本和登录按钮的id，获取文本的value值，定义正则表达式的样式；第三步按钮的点击事件；第四步if判断文本value的字符串和正则是否匹配，匹配弹出"登录成功"else弹出"登录失败"。 知识点：第一步：文本输入用到input标签，具体语句为;登录按钮用到butt... 阅读全文
posted @ 2017-04-23 15:49 bonly-ge 阅读(1286) 评论(0) 推荐(0)
正则替换敏感词汇
摘要：目的：把文本1中的内容过滤一些字符后写入 文本2 思路：可以利用RegExp(正则表达式)的全局匹配字符g和String(字符串)的replace可以完成替换。 先要通过input设置两个文本text1 、text2，并设置id以便通过JS获取里面的value值来进行替换，在JS 里面通过document.getElementById("id");来获取id，注意id要加上引号；replace在使... 阅读全文
posted @ 2017-04-22 22:10 bonly-ge 阅读(2557) 评论(0) 推荐(0)
JavaScript必备知识
摘要：数据类型 字符串：字符串用来储存一系列字符，放到引号里面，单引号和双引号的效果一样。 例如：var a=" bongly-ge"; var a='bonly-ge'; 效果一样，其中var是定义变量a，意思就是表明a是一个变量，现在里面的值是字符串bonly-ge，Javascript里面不能凭空出现任何一个变量，所以必须声明。注意：引号的使用和混合使用，后期会有无意义字符也需要声明，例... 阅读全文
posted @ 2017-04-22 19:52 bonly-ge 阅读(250) 评论(0) 推荐(0)
99乘法表练习-试手
摘要：今天花费近三个小时的时间研究如何在这博客园上发博客，看了那么多教程也没研究出来如何利用 office world 2010来写博客，官网给的链接也下载不了，很是遗憾，所以排版有些难看，希望了解的大神救救我这个小白。 for(var i=9;i =1;i ){ for(var j=1;j<=i;j++ 阅读全文
posted @ 2017-04-20 21:03 bonly-ge 阅读(525) 评论(1) 推荐(0)