xiyuanhuhu的博客

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

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

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

三个按钮和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

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

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

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

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

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

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

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

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

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

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

布局上尺寸不太好算，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

自己写的和原版不太一样，感觉原版设置了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()

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

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

<script>window.onload = function(){ var otex = document.getElementsByTagName("input"); otex[0].onkeyup = function(){ this.value = this.value.replace(/[^\d]/,"");}//输入时直接删除掉不符合数字的内容 otex[

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

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