huzijia888的博客

原创 HTML文字波浪形前进后退效果

#field{position:absolute;/*设置出一个用于字体移动的区域*/top:0px;left:0px;width:500px;height:50px;}var flag=new Array(0,0,0,0,0,0,0,0);//判定各个文字竖直移动方向的标志位数组var leflag=0;//确定文字水平移动方向的标志位functi

原创 canvas绘制火柴人

#huaban{border:1px solid;}var can=document.getElementById("huaban");//获得画板数据var con=can.getContext('2d');//获得笔刷    con.lineWidth=2;//设置县调平宽度为2个像素   con.beginPath();//起始一个

原创 HTMLcanvas画矩形

#huaban{border:1px solid;}var can=document.getElementById("huaban");//获得画板数据var con=can.getContext('2d');//获得笔刷   con.fillStyle="red";//设置填充颜色   con.strokeStyle="blue";//

原创 HTML中canvas画直线

#huaban{border:1px solid;}function huitu(){var can=document.getElementById("huaban");//通过ID获取画板var con=can.getContext('2d');//获取笔刷con.moveTo(20,20);//路径移动到指定点con.lineTo(100,100);//创建

原创 HTML网页计算器

#first{/*第一个数字输入框*/width:210px;border:0px;}#second{/*运算符号输入框*/width:210px;border:0px;}#three{/*第二个数字输入框*/width:70px;border:0px;}#four{/*结果输入框，设置文字方向为右*/width:140px;border:0

原创 HTML焦点移动到图片上，图片位置发生移动

#tu1{position:absolute;/*图片不能设置为static，这样才能保证Javascript可以设置位置数据*/top:0px;left:30px;}#span1{position:absolute;top:50px;left:0px;}#shop{position:absolute;top:0px;left:0px;wid

原创 鼠标单击的行反色，删除选定的行

起始状态鼠标单击选中行删除选中的行var tar;//保存被选中的行元素var flag=0;//是否有行刚刚被单击过标志位function cli(event){//鼠标单击事件if(typeof(tar)!="undefined"){//如果已有单元格被点击过tar.style.backgroundColor=

原创 HTML动态增加和删除表格的行和列

起始状态增加行增加列删除行删除列function addrow(){  var c=document.getElementById('mytable');//获得表格的信息  if( c.rows.length==0){//如果是向一个空表增加一行 var x=c.insertRow(0);//

原创 HTML动态生成指定行数和列数的可编辑表格

未创建表格时创建表格保存表格编辑表格td{text-align:center;/*设置单元格样式*/width:100px;height:30px;}.inp{width:80px;/*设置普通单元格输入框样式*/height:26px;font-size:10px;text-align:cen

原创 表格内外边框属性测试

var bord=new Array("void","above","below","hsides","vsides","lhs","rhs","box","border");//新建表格外边框frame数组   var k=0;var bord1=new Array("none","groups","rows","cols","all");//新建表格内边框rules属性数组var

原创 鼠标移动到链接上显示提示文字

中国地质大学

原创 获取元素的所有内容

function fire(){var ii=document.getElementById("haha");alert(ii.outerHTML);//outerHTML获取元素本身及元素标签内部的内容}

原创 图片当做超链接

原创 超链接当做书签来使用

第一章第二章第三章

原创 超链接的target属性使用

ul{list-style-image:url(xin.jpg);/*使用图片当作列表项制定图标*/}百度1百度2百度3百度4

原创 使用图片作为列表的指定图标

ul{list-style-image:url(xin.jpg);/*使用图片当作列表项指定图标*/}静夜思床前明月光疑似地上霜举头望明月低头思故乡悯农    锄禾日当午汗滴禾下土谁知盘中餐粒粒皆幸苦

原创 无序列表和有序列表的嵌套使用

静夜思床前明月光疑似地上霜举头望明月低头思故乡悯农    锄禾日当午汗滴禾下土谁知盘中餐粒粒皆幸苦

原创 HTML有序列表使用

悯农锄禾日当午，汗滴禾下土。谁知盘中餐,粒粒皆幸苦。

原创 实现全选效果

#gouwu{width:100px;}function te1(event){var quan=event.target;//选择触发事件的元素var sale=document.getElementsByName("sale");//获取选择表var i=0;if(quan.checked==true){//判断全选是否被选择for(i=0;isal

原创 更改单选按钮的选项值来改变调查内容

function te1(){var ta=document.getElementsByTagName("table");//获得HTML文档中的table元素的集合，传递的字符串可以不分大小写var tab=ta[0];//获得tablevar ra=document.getElementsByName("select");//获取单选按钮组合if(ra[0].checked==

原创 HTML5 根据 一级下拉列表的选中项动态改变2级下拉列表的选项

function tes1(){var a1=new Array("冰箱","彩电","洗衣机");//新建三个数组，用来更改二级下拉列表内容var a2=new Array("苹果","三星","小米");var a3=new Array("巧克力","鱼豆腐","饼干","薯片");var main=document.getElementById("main");var n

原创 用数组给selec元素插入选项

function tes1(){var array1=new Array("洗碗","拖地","洗衣服","做饭","扫地");//新建一个5个元素的数组var s1=document.getElementById("male");//获取select元素var i=0;for(i=0;ivar kk=document.createElement("OPTION");//创建o

原创 select元素的方法使用

>将1下拉列表中的选中元素移动到2中，function tes1(){var s1=document.getElementById("male");var s2=document.getElementById("female");s2.add(s1.options[s1.selectedIndex],null);//select.add(option,before)该方

原创 获得下拉列表中的选中值

function test(){var tes=document.getElementById("tes");//获取select元素alert(tes.options["内容值："+tes.selectedIndex].innerHTML+"元素值"+tes.options[tes.selectedIndex].value);//通过selectedIndex获得选中的选项的下标，再通过

原创 按下回车键将焦点转换到表单的下一个元素

function test(event){var test=event.keyCode;//获得引发事件的键值var cc=event.target;//获得引阀事件的元素var f=document.getElementById("ff");//获得表单if(test==13){//13是回车键的键值for(i=0;iif(f.elements[i]==cc){//也可以

原创 文本框获得焦点时选中文本框中的文字

function test(){var test=document.getElementById("test");test.select();//选中框中的所有文本;}

原创 使用setTimeout函数实现计时功能

var c=0;var t;function qi(){//将需要隐藏的元素id传递进来var bar=document.getElementById("ti1");bar.innerHTML=c;c=c+1;t=setTimeout("qi()",100);//循环调用实现间隔100ms加1计时}function ting(){clearTimeout(t);

原创 hidden属性实现拉出式导航栏

使用hidden属性实现拉出式导航效果#menubar{width:200px;}#down1{position:absolute;top:10px;left:190px;width:8px;height:9px;border-style:outset;border-radius:10px;}#menuitem1{heig

原创 动态增加表格的行

双击加号按钮可以增加表格行数table{border:1px solid red;}td{border:1px solid blue;}function add(){var table1=document.getElementById("table1");var tr1=document.createElement("TR");t

原创 HTML5 登录框设计

#s1{width:300px;height:220px;border:2px solid #00FFCC;}#s2{position:absolute;width:300px;height:50px;top:180px;background-color:#D8D8D8;}.lef{position:absolute;left:40px;

原创 autocomplete属性使用

#test1{width:221px;}请输入:

原创 html5 pattern属性的使用

#test1{width:221px;}请输入Email:

原创 HTML5 autofocus属性

#test1{width:221px;}function setfocus(){var test2=document.getElementById("test2");test2.focus();//focus()函数，使元素获得焦点。blur()函数使元素失去焦点；}autofocus属性：账户：密码：&nbsp&nbsp

原创 input search类型的使用

#test1{width:300px;}请输入搜索关键字：

原创 input时间日期输入类型的使用

function test(){var test1=document.getElementById("test1").value;var test2=document.getElementById("test2").value;var test3=document.getElementById("test3");var test4="您预约的考试时间是："+test1+"&nbsp

原创 HTML5使用rgb颜色值来改变区块颜色

#qu{width:360px;}#test2{position:absolute;top:34px;left:230px;width:150px;height:150px;border:1px solid;background-color:black;}function ch(){var R=document.getElementByI

原创 input的带验证的类型的使用

验证Email：验证URL：验证数字：

原创 使用table表格设计调查表

#table1{}#table1{background-color:#B0C4DE;}.td1{border-top:1px solid;border-right:1px solid;text-align:right;}.td2{width:500px;border-top:1px solid;}

原创 使用HTML5 select标签来实现更改网页背景颜色

function load(){var test=document.getElementById("test");document.body.style.backgroundColor=test.options[test.selectedIndex].value;//获得select的selectedIndex属性来获得option的value值，设置body的backgroundCo

原创 使用appendChild（）和createElement（）方法实现留言板

#section1{width:480px;height:260px;border:1px solid;}#liu{       width:480px;   }.ti{font-size:15px;font-style:bold;width:476px;}.con{font-size:10px;width:476px;}.zz{