xiyuanhuhu-CSDN博客

原创 fgm实例练习笔记-4.1 setTimeout应用

整体思路就是写一个动态的导航栏，鼠标划到.onmouseover每个选项上显示包含的内容（下一级的nav），鼠标离开.onmouseout0.3秒（300毫秒）后，下一级nav自己消失display:none;，此处用到延迟setTimeout（）；页面布局方面，导航栏使用了雪碧图，给每一部分设置好background-position: 导航栏每一项和下一级nav的每一项有:hover 效果。Ht

2017-07-15 22:03:08 329

原创 fgm实例练习笔记-3.9倒计时

clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。语法：clearInterval(id_of_setinterval)自己写的功能不全，当时间倒计时为0时，停不下来，还会一直减成负数。因为自己写的减时间方法，是把秒和分分开计算，秒减到0时分减1，并让秒

2017-07-13 15:21:11 329

原创 fgm实例练习笔记-3.8简易网页时钟

复习了 Date类型。创建一个日期对象 var now = new Date(); 日期/时间方法，getHours() , getMinutes , getSeconds()时间的更新引入了setInterval(,1000)；函数。每1秒重新获取当前时间，并更新。自己写的（没有实现的功能是当只有一位数字的时候前面自动补0）：window.onload = function(){ var

2017-07-13 12:07:25 277

原创 fgm实例练习笔记-3.7网页计算器

自己写布局的时候，直接写了很多<input type="button"> ，但其实没什么非要用按钮的必要。原版是写了<ul><li<a></a></li></ul>，无序列表帮助排版，最终嵌套一个a标签，做好接口。最麻烦的是右下角的等号，怎么弄都位置不合适。原版用的绝对定位，也不是很好的方法。每个按钮有:hover 做出鼠标滑过时的效果，变色只是将径向渐变的两种颜色对调了顺序。自己写的<script

2017-07-13 11:01:32 250

原创 fgm实例练习笔记-3.6判断数字是否为两位数

2017-07-12 17:03:46 861

原创 fgm实例练习笔记-2.5页面加载后自加一

setInterval()方法，按照指定的周期（毫秒计），调用函数或计算表达式。1000毫秒=1秒 setInterval(code,millisec[,”lang”])，code是函数或计算表达式，后面是设置的周期思路就是写一个函数，自加1，并修改页面上的值。然后用setInterval调用。window.onload = function(){ var tim = document.g

2017-07-11 23:11:05 211

原创 fgm实例练习笔记-3.4比较数字大小

onkeyup事件（全小写），在键盘按键被松开时发生。比较两个数字大小，实现效果是仅整数之间的比较，那么对于用户输入的数字就要进行规范。与其在输入了小数或非数字后再舍入取整或者报错，还不如一开始就禁止用户输入。所以给文本框引入onkeyup事件和replace()方法，输入非法内容将立即被删去（替换为空 “”）。判定是否为非法内容，使用正则表达式，非\d的就删掉。this.value.repla

2017-07-11 22:48:11 327

原创 fgm实例练习笔记-3.3点击累加数字，自加1

自己写的和原版不太一样，感觉原版设置了i更好一点：window.onload = function(){var obtn = document.getElementsByTagName("input")[0];var i = 0;obtn.onclick = function(){ i = parseInt(obtn.value)+ 1; obtn.value = i.toString()

2017-07-11 21:30:06 280

原创 fgm实例练习笔记-2.11鼠标移过改变图片路径

布局上尺寸不太好算，li容易溢出。window.onload = function(){var oimg = document.getElementById("outer").getElementsByTagName("img");for (var i = 1;i< oimg.length;i++){//i从1开始，去掉第一个要被修改的图片 oimg[i].onmouseover = funct

2017-07-11 21:02:06 213

原创 fgm实例练习笔记-2.6图片列表：鼠标移入/移出改变图片透明度

页面布局，写ul，嵌套li li里面再放图片。留好各种边框线borderscript部分：比起建立一个函数去直接修改图片的透明度opacity 属性，这里给img预设了一个特殊的类，在鼠标移入/移出时调用/去掉类，更简便，也方便日后修改这个效果。current类：li img.current {opacity:1}<script>window.onload = function(){var

2017-07-10 23:19:03 258

原创 fgm实例练习笔记-2.5函数传参，改变Div任意属性的值

html部分，为了让文本框和自己的标签<label> 能够在同一行内（input和label都是行内元素），又不会和下一个文本框和标签混在同一行，可以用一个块级元素把它们包裹起来，这里使用的是<p><label></label><input></p>script:<script>var change = function(a,b,c){ a.style[b] = c;}//替换的函数写在了外部。

2017-07-10 17:10:39 359

原创 fgm实例练习笔记-2.4弹出层效果

弹出层并不是真正的弹窗alert（），而是在点击按钮后，显示display:block; 一个div覆盖住整个页面，再在这个div上堆叠一个div，样式做成弹窗的样子。并给这个伪弹窗设置一个关闭按钮。script部分没有任何难度：window.onload= function(){var obtn = document.getElementsByTagName("button")[0];var

2017-07-10 15:58:55 354

原创 fgm实例练习笔记-2.3求出数组中所有数字的和

页面布局，一个<input> 输入框，一个按钮。还有一个初始隐藏display:none; 的显示计算结果的区域。<script>window.onload = function(){ var inp = document.getElementsByTagName("input")[0]; //获取文本框 var obt = document.getElementsByTagName("but

2017-07-08 19:21:11 278

原创 fgm实例练习笔记-2.1点击展开下拉列表

并不是真正的下拉列表，而是一个按钮button，点击显示display:block; 一个列表。再点击列表中每一项可以实现相应功能，并且最后一项可以直接关闭列表display:none;，再次点击按钮也可以关闭列表。鼠标扫过选项时选项变色background:blue; ，用hover选择器实现。每个选项点击后还会有效果，所以在每个选项li 内做了一个<a href=""> 标签，留出接口。

2017-07-08 17:29:01 197

原创 fgm实例练习笔记-1.6记住密码提示框

虽然提示框可以用<input type="checkbox" value="xxx"> 的value实现，但是显示速度慢，不能自定义样式。所以这里单独写了一个div作为提示框，没选中的时候display:none 隐藏，选中后display: block; 出现，鼠标移走后再次隐藏。script部分原理和1.5一样。<script>window.onload = function(){var

2017-07-08 15:21:26 226

原创 fgm实例练习笔记-1.5js写css hover选择器

style里预设一个类，叫hover #outer.hover{background:green;border:10px solid red;}script部分：<script>window.onload= function(){ var odiv = document.getElementById("outer");//获取div odiv.onmouseover = function()

2017-07-08 14:47:10 261

原创 fgm实例练习笔记-1.4用循环将三个Div变成红色

页面写按钮，写一个div包含三个div。初始化为background：black；window.onload = function(){ var obtn = document.getElementsByTagName("button")[0]; var ore = document.getElementsByTagName("button")[1]；//加了一个重置按钮，成为第二个button

2017-07-08 14:25:54 304

原创 fgm实例练习笔记-1.3函数接收参数并弹出

两个文本框input，一个按钮最好用button写，不和文本框混在一起方便调用input。 script代码：<script type="text/javascript">var func = function(a,b){ alert(a.value); alert(b.value);}; //外部写函数，alert弹出，传的参数是对象，当前input的value值window.o

2017-07-07 18:55:53 297

原创 fgm实例练习笔记-1.2网页换肤

三个按钮和nav均用ul实现，float：left调整为横向。效果是nav和body的background-color改变。调用了不同的外部css文件实现。<link href="green.css" rel="stylesheet" type="text/css"> link的href将被script修改。先写style初始化。script部分：<script type="text/javas

2017-07-07 18:40:29 409

原创 fgm实例练习笔记-1.1控制Div属性

页面布局上，五个按钮用input写，和要改变的div共同嵌在一个父级div里。 script部分：var changeStyle = function (elem, attr, value){ elem.style[attr] = value};//函数写在了外部，三个参数分别是对象，对象style属性的其中一项（用方括号按属性名查询数组内的项），值window.onload = f

2017-07-07 18:16:27 268

原创写js的拼写错误

document.getElement**s**ByTagName(“”) document.getElementById(“”) document.getElement**s**ByName(“”)别再忘了s了。

2017-07-07 15:35:26 506

原创《数据结构教程（第四版）》读书笔记-第二章线性表

线性表：具有相同特性的数据元素的一个有限序列。线性表的长度为n。一对一结构。线性表的顺序存储结构——顺序表物理结构上连续。线性表的链式存储结构——链表用一组任意的存储单元存放数据元素。可以连续可以不连续。除了存储数据域Data外，还要存储指针域next和prior。每个链表都有一个头结点，数据域为空，通过头结点的指针唯一表示该链表。单链表基本运算：建立（头插入/尾插入），初始化、销毁、判断为

2017-06-26 16:49:52 469

原创《数据结构教程（第四版）》读书笔记-第一章绪论

第一章绪论数据数据元素是数据（集合）中的一个“个体”，是数据的基本单位。又称为元素、结点、顶点、记录等。数据项是具有独立含义的、组成数据元素的最小单位。称为字段、域。数据元素是数据项的集合。程序=算法+数据结构（逻辑结构和存储（物理）结构）逻辑结构的类型： 1. 线性结构，一对一关系，除了开始结点和终端结点外，其他节点有且仅有一个前驱结点和一个后继结点。 2. 非线性结构，分为树形

2017-06-26 15:39:39 1252

原创 CSS揭秘读书笔记-第二章背景与边框

半透明边框默认情况下，背景会延伸到边框所在的区域的下层。如果要给一个容器添加半透明白色边框，并用白色背景，这样写的话是看不到半透明效果的，white背景会从半透明边框下透出来：border:10px solid hsla(0,0%,100%,.5);background: white; 可以通过background-clip: padding-box;调整，background-clip的默认值是

2017-06-22 22:21:28 399

原创 CSS3线性渐变与径向渐变

兼容性IE9及之前版本不兼容线性渐变background:linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 其中，angle是角度，以逆时针方向计算 side-or-corner的取值有left,right,top,bottom，（对应270deg，90，0，180），bot

2017-06-21 21:50:10 601

原创 CSS揭秘读书笔记-第一章引言

浏览器前缀：常见的有Firefox的-moz-，IE的-ms-，Opera的-o-，Safari和Chrome的-webkit-。每个浏览器可以实现实验性的（甚至是私有的、非标准的）特性。浏览器前缀极易滥用，未来需要打补丁，所以很多开发者会直接写上所有浏览器前缀，再把无前缀的代码放在最后，以希望满足所有情况，造成冗余。CSS编码技巧：尽量减少要改动的地方，如果某些值互相依赖，那就用代码体现出来。比

2017-06-21 16:07:29 392

原创 CSS实现首行缩进和悬挂缩进

首行缩进text-indent控制首行缩进，后加缩进长度，数值可正可负，单位可以是em，百分比，或者绝对单位。

2017-06-21 15:13:12 23839

xiyuanhuhu的博客