1、新增输入框
<script type="text/javascript">
window.onload=function(){
var btn= document.getElementById("btn");
var ul= document.getElementById("u");
//点击事件
btn.onclick=function(){
var li= document.createElement("li");//创建li标签
var input= document.createElement("input"); //创建input标签
input.setAttribute("type","text");
input.setAttribute("placeholder","请输入内容");
li.appendChild(input);
ul.appendChild(li);
}
}
</script>
window.onload=function(){
var btn= document.getElementById("btn");
var ul= document.getElementById("u");
//点击事件
btn.onclick=function(){
var li= document.createElement("li");//创建li标签
var input= document.createElement("input"); //创建input标签
input.setAttribute("type","text");
input.setAttribute("placeholder","请输入内容");
li.appendChild(input);
ul.appendChild(li);
}
}
</script>
2、Table对象
<script type="text/javascript">
window.onload=function(){
var table= document.getElementById("myTable");
var btn1= document.getElementById("btn1");
var btn2= document.getElementById("btn2");
//显示表格总行数
btn1.onclick= function () {
alert(table.rows.length);
}
//显示第2行第2列的单元格内容rows是一个数组 cells也是一个数组
btn2.onclick= function () {
alert(table.rows[1].cells[1].innerHTML);
}
}
</script>
</head>
<body>
<input type="button" value="显示表格总行数" id="btn1">
<input type="button" value="显示第2行第2列的单元格内容" id="btn2">
<table id="myTable" border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
window.onload=function(){
var table= document.getElementById("myTable");
var btn1= document.getElementById("btn1");
var btn2= document.getElementById("btn2");
//显示表格总行数
btn1.onclick= function () {
alert(table.rows.length);
}
//显示第2行第2列的单元格内容rows是一个数组 cells也是一个数组
btn2.onclick= function () {
alert(table.rows[1].cells[1].innerHTML);
}
}
</script>
</head>
<body>
<input type="button" value="显示表格总行数" id="btn1">
<input type="button" value="显示第2行第2列的单元格内容" id="btn2">
<table id="myTable" border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
</body>
</body>
3、Table新增和删除
<script type="text/javascript">
window.onload=function(){
var table= document.getElementById("myTable");
var btn1= document.getElementById("btn1");
var btn2= document.getElementById("btn2");
//新增insertRow(index)
btn1.onclick= function () {
var row= table.insertRow(0);
//给行新增列 并且给列赋值
row.insertCell(0).innerHTML="新增行的列1";
row.insertCell(1).innerHTML="新增行的列2";
row.insertCell(2).innerHTML="新增行的列3";
}
//删除最后一行deleteRow(index)
btn2.onclick= function () {
table.deleteRow(table.rows.length-1);
}
}
</script>
window.onload=function(){
var table= document.getElementById("myTable");
var btn1= document.getElementById("btn1");
var btn2= document.getElementById("btn2");
//新增insertRow(index)
btn1.onclick= function () {
var row= table.insertRow(0);
//给行新增列 并且给列赋值
row.insertCell(0).innerHTML="新增行的列1";
row.insertCell(1).innerHTML="新增行的列2";
row.insertCell(2).innerHTML="新增行的列3";
}
//删除最后一行deleteRow(index)
btn2.onclick= function () {
table.deleteRow(table.rows.length-1);
}
}
</script>
4、String对象的使用
<script type="text/javascript">
window.onload=function() {
var url="http://www.bdqn.cn?name=admin";
//想要获取?之后的数据 并且把 admin 变成大写
var index= url.indexOf("?");
//alert(url.substring(index+1)); ？之后的数据
index= url.indexOf("=");
alert(url.substring(index+1).toUpperCase());
}
</script>
window.onload=function() {
var url="http://www.bdqn.cn?name=admin";
//想要获取?之后的数据 并且把 admin 变成大写
var index= url.indexOf("?");
//alert(url.substring(index+1)); ？之后的数据
index= url.indexOf("=");
alert(url.substring(index+1).toUpperCase());
}
</script>
5、Date的使用
<script type="text/javascript">
window.onload=function() {
function getTime(){ //获取当前系统时间
var date=new Date();
var hours=date.getHours();
var mins=date.getMinutes();
var secs=date.getSeconds();
document.getElementById("time").innerHTML=hours+":"+mins+":"+secs;
}
//定时函数
setInterval(getTime,1000);
}
</script>
window.onload=function() {
function getTime(){ //获取当前系统时间
var date=new Date();
var hours=date.getHours();
var mins=date.getMinutes();
var secs=date.getSeconds();
document.getElementById("time").innerHTML=hours+":"+mins+":"+secs;
}
//定时函数
setInterval(getTime,1000);
}
</script>
6、数组的使用
<script type="text/javascript">
//数组的声明
var arr=["aa","bb","cc"]; //3
var arr1=new Array(); //0
var arr2=new Array(20); //20
var arr3=new Array("aa","bb","cc"); //3
//遍历数组中的元素
for(var i=0;i<arr3.length;i++){
document.write(arr3[i]+"<br/>")
}
//数组的声明
var arr=["aa","bb","cc"]; //3
var arr1=new Array(); //0
var arr2=new Array(20); //20
var arr3=new Array("aa","bb","cc"); //3
//遍历数组中的元素
for(var i=0;i<arr3.length;i++){
document.write(arr3[i]+"<br/>")
}
for(var x in arr3){
document.write(x+"====>"+arr3[x]+"<br/>")
}
document.write(x+"====>"+arr3[x]+"<br/>")
}
</script>
7、数组的属性和方法
<script type="text/javascript">
//数组的声明
var arr=["aa","cc","bb"];
//数组的长度
document.write("数组的长度是："+arr.length+"<br/>");
//向数组中添加一个新元素 push()新增之后会返回一个数组新的长度
document.write(arr.push("dd")+"<br/>") ;
document.write(arr[3]+"<br/>");
//数组的声明
var arr=["aa","cc","bb"];
//数组的长度
document.write("数组的长度是："+arr.length+"<br/>");
//向数组中添加一个新元素 push()新增之后会返回一个数组新的长度
document.write(arr.push("dd")+"<br/>") ;
document.write(arr[3]+"<br/>");
//把数组使用字符 "-" 连接起来 join()
document.write(arr.join("-")+"<br/>");
document.write(arr.sort()+"<br/>"); //字符abcd.....
document.write(arr.join("-")+"<br/>");
document.write(arr.sort()+"<br/>"); //字符abcd.....
//创建一个新的数组
var arr2=[10,20,2,3,150,1,90];
//如果说是数字排序 我们需要加入一个比较函数
document.write(arr2.sort(function(a,b){
return a-b; // 如果想 降序 b-a
}));
var arr2=[10,20,2,3,150,1,90];
//如果说是数字排序 我们需要加入一个比较函数
document.write(arr2.sort(function(a,b){
return a-b; // 如果想 降序 b-a
}));
</script>
8、打印等腰三角形
<script type="text/javascript">
window.onload=function(){
var arr=[]; //声明一个空的数组
var str="";
for(var i=0;i<8;i++){
str="*";
for(var j=0;j<i;j++){
str+=" *"
}
arr.push(str);
}
document.getElementById("text").innerHTML=(arr.join("<br/>"));
}
window.onload=function(){
var arr=[]; //声明一个空的数组
var str="";
for(var i=0;i<8;i++){
str="*";
for(var j=0;j<i;j++){
str+=" *"
}
arr.push(str);
}
document.getElementById("text").innerHTML=(arr.join("<br/>"));
}
</script>
9、style样式
<script type="text/javascript">
window.onload=function(){
var dom= document.getElementById("text");
/*
alert(1);
//改变
dom.style.backgroundColor="pink";
dom.style.marginLeft="200px";
dom.style.display="none";*/
window.onload=function(){
var dom= document.getElementById("text");
/*
alert(1);
//改变
dom.style.backgroundColor="pink";
dom.style.marginLeft="200px";
dom.style.display="none";*/
dom.className="title";
}
}
</script>
10、Tab选项卡
<style type="text/css">
#tab{ 400px;}
#tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}
#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}
#tab ul li.cur{background-color: red}
#tab .content{100%;border:1px solid #eeeeee;height: 100px;}
</style>
<script type="text/javascript">
window.onload = function() {
//获取li
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){ //循环的是tab框
lis[i].index=i;
lis[i].onmousemove=function(){
for(var j=0;j<lis.length;j++){ //循环的是div的内容
document.getElementById("content-"+j).style.display="none";
lis[j].className="";
}
lis[this.index].className="cur";
document.getElementById("content-"+this.index).style.display="block";
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li class="cur">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="c-box">
<div class="content" id="content-0">
tab-1第一个容器的内容
</div>
<div class="content" id="content-1" style="display: none;">
tab-2第二个容器的内容
</div>
<div class="content" id="content-2" style="display: none;">
tab-3第3个容器的内容
</div>
<div class="content" id="content-3" style="display: none;">
tab-4第4个容器的内容
</div>
</div>
</body>
#tab{ 400px;}
#tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}
#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}
#tab ul li.cur{background-color: red}
#tab .content{100%;border:1px solid #eeeeee;height: 100px;}
</style>
<script type="text/javascript">
window.onload = function() {
//获取li
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){ //循环的是tab框
lis[i].index=i;
lis[i].onmousemove=function(){
for(var j=0;j<lis.length;j++){ //循环的是div的内容
document.getElementById("content-"+j).style.display="none";
lis[j].className="";
}
lis[this.index].className="cur";
document.getElementById("content-"+this.index).style.display="block";
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li class="cur">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="c-box">
<div class="content" id="content-0">
tab-1第一个容器的内容
</div>
<div class="content" id="content-1" style="display: none;">
tab-2第二个容器的内容
</div>
<div class="content" id="content-2" style="display: none;">
tab-3第3个容器的内容
</div>
<div class="content" id="content-3" style="display: none;">
tab-4第4个容器的内容
</div>
</div>
</body>
-----使用jquery实现---
<title>Tab切换</title>
<!--先引入样式文件-->
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<!--引入jquery需要的脚本库-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
<!--先引入样式文件-->
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<!--引入jquery需要的脚本库-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
$("#myTabs").tabs({
active:1, //默认选中的tab
event:"mouseover" //触发的事件
})
})
</script>
11、滚动距离
$(function(){
$("#myTabs").tabs({
active:1, //默认选中的tab
event:"mouseover" //触发的事件
})
})
</script>
11、滚动距离
<style type="text/css">
* { margin:0; padding: 0; }
#box1 { height:200px; 200px;background:#eee;border:1px solid #000;overflow-y:scroll; }
p { line-height:40px; }
</style>
<script type="text/javascript">
window.onload = function () {
var text=document.getElementById("text");
var box1=document.getElementById("box1");
box1.onscroll=function(){
text.innerHTML="距离Top多少像素："+box1.scrollTop;
}
}
</script>
12、漂浮图片
* { margin:0; padding: 0; }
#box1 { height:200px; 200px;background:#eee;border:1px solid #000;overflow-y:scroll; }
p { line-height:40px; }
</style>
<script type="text/javascript">
window.onload = function () {
var text=document.getElementById("text");
var box1=document.getElementById("box1");
box1.onscroll=function(){
text.innerHTML="距离Top多少像素："+box1.scrollTop;
}
}
</script>
12、漂浮图片
<style type="text/css">
*{margin:0;padding: 0;}
#box{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box=document.getElementById("box");
var time=null,x= 1,y= 1,speed=5;
*{margin:0;padding: 0;}
#box{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box=document.getElementById("box");
var time=null,x= 1,y= 1,speed=5;
function go(){
//水平方向
if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
x=-1;
}
if(box.offsetLeft<0){
x=1;
}
box.style.left=box.offsetLeft+x*speed+"px";
//垂直方向
if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
y=-1;
}
if(box.offsetTop<0){
y=1;
}
box.style.top=box.offsetTop+x*speed+"px";
}
//定时函数
time=setInterval(go,100);
//鼠标移上去 停止
box.onmousemove=function(){
if(time!=null){
clearInterval(time);
}
}
//鼠标离开 继续移动
box.onmouseout=function(){
time=setInterval(go,100);
}
}
</script>
//水平方向
if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
x=-1;
}
if(box.offsetLeft<0){
x=1;
}
box.style.left=box.offsetLeft+x*speed+"px";
//垂直方向
if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
y=-1;
}
if(box.offsetTop<0){
y=1;
}
box.style.top=box.offsetTop+x*speed+"px";
}
//定时函数
time=setInterval(go,100);
//鼠标移上去 停止
box.onmousemove=function(){
if(time!=null){
clearInterval(time);
}
}
//鼠标离开 继续移动
box.onmouseout=function(){
time=setInterval(go,100);
}
}
</script>