javaScript特效

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第一个界面</h1>
<a href="js02history.html">当前页面</a>
<a href="js03history.html">下一个页面</a>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
</body>
</html>

01.history属性界面1

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第二个界面</h1>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>

history属性界面2

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript">
document.write("host值为:"+location.host+"<br/>")
document.write("hostname值为:"+location.hostname+"<br/>")
document.write("href值为:"+location.href+"<br/>")
document.write("hash值为:"+location.hash+"<br/>")
document.write("search值为:"+location.search+"<br/>")
</script>
</head>
<body>
<input type="text">
<input type="button" value="刷新当前页面" onclick="location.reload()">
<input type="button" value="替换当前页面" onclick="location.replace('http://www.bdqn.cn')">
</body>
</html>

02.location属性

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
/*改变层内容*/
function changeLink(){
document.getElementById("node").innerHTML="<h1>改变</h1>";
//document.getElementById("node").innerText="<h1>改变</h1>";
}
/*获取所有input标签中所有的value*/
function all_input(){
var allInput= document.getElementsByTagName("input");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<allInput.length;i++){
str+=allInput[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
/*获取所有name属性值是season的value*/
function s_input(){
var season= document.getElementsByName("season");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<season.length;i++){
str+=season[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>

03.document

document.referrer; /*返回载入当前文档的来源文档的URL*/ 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window中的open()</title>
<script type="text/javascript">
function openNew(){
window.open(
"http://www.baidu.com",
"百度页面",
"height=400,width=400"
);
}
</script>
</head>
<body> <input type="button" value="打开新的窗口" onclick="openNew()">
</body>
</html>

04.open()

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时函数</title>
<script type="text/javascript">
var time=0;
function count(){ //计数的方法
document.getElementById("context").innerHTML="时间:"+(++time); }
var interval,timeout;
//定时函数
function setI(){ //setInterval函数 周期执行
interval=setInterval("count()",1000);
}
function setT(){ //setTimeout函数 执行一次
timeout= setTimeout("count()",1000);
}
//清除定时函数
function clearI(){//清除setInterval函数
clearInterval(interval);
}
function clearT(){//清除setTimeout函数
clearTimeout(timeout);
} </script>
</head>
<body>
<div id="context"></div>
<input type="button" value="setInterval函数" onclick="setI()">
<input type="button" value="setTimeout函数" onclick="setT()"><br/> <input type="button" value="清除setInterval函数" onclick="clearI()">
<input type="button" value="清除setTimeout函数" onclick="clearT()">
</body>
</html>

05.定时函数

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<script type="text/javascript">
/*
* nodeName:
* 元素节点显示的是标签名称
* 属性节点显示的是属性名称
* 文本节点显示的是 #text
* 文档节点显示的是#document
* nodeValue;
* 文本节点显示的是文本
* 属性节点显示的是属性值
*
* nodeType:
* 1 元素节点
* 2 属性节点
* 3 文本节点
* 8 注释
* 9 文档
* */
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/* alert("节点名称:"+ul.nodeName);
alert("节点类型:"+ul.nodeType);*/
/*获取ul中的第一个li*/
var li=ul.firstElementChild;
alert("节点名称:"+li.nodeName);
alert("节点类型:"+li.nodeType);
alert("节点内容:"+li.childNodes[0].nodeValue); /*改变小猫咪图片的宽度*/
var image=document.getElementsByName("cat")[0];
image.setAttribute("width","200px");
//获取src的值
alert(image.getAttribute("src"));
} </script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul> <img src="data:images/cat.jpg" name="cat">
</body>
</html>

06.访问节点

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<script type="text/javascript"> window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/*新增节点*/
var newLi= document.createElement("li");
newLi.innerHTML="小黑";
ul.appendChild(newLi);
/*获取ul第三个li*/
var second= ul.getElementsByTagName("li")[2];
ul.insertBefore(newLi,second);
/*clone*/
var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);
document.getElementById("d").appendChild(ul2);
/*删除节点*/
var reNode= ul.getElementsByTagName("li")[0];
// ul.removeChild(reNode);
/*替换节点*/
ul.replaceChild(newLi,reNode);
} </script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<div id="d">
</div>
</body>
</html>

07.节点的增删改

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新增输入框</title>
<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> </head>
<body>
<input type="button" value="新增" id="btn">
<ul id="u"></ul>
</body>
</html>

08.新增输入框

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table对象</title>
<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> </table> </body>
</html>

09.table对象

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新增和删除行</title>
<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> </head>
<body>
<input type="button" value="新增" id="btn1">
<input type="button" value="删除最后一行" 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>
</html>

10.table新增和删除行

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>String对象的使用</title>
<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>
</head>
<body>
</body>
</html>

11.Stirng对象的使用

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当前时间</title>
<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>
</head>
<body> 当期系统时间:<div id="time"></div>
</body>
</html>

12.Date的使用

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组的遍历</title>
<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/>")
} for(var x in arr3){
document.write(x+"====>"+arr3[x]+"<br/>")
} </script>
</head>
<body>
</body>
</html>

13.数组的使用

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组的属性和方法</title>
<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/>"); //把数组使用字符 "-" 连接起来 join()
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
})); </script>
</head>
<body>
</body>
</html>

14.数组的属性和方法

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>打印等腰三角形</title>
<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+="&nbsp;&nbsp;*"
}
arr.push(str);
}
document.getElementById("text").innerHTML=(arr.join("<br/>"));
} </script>
</head>
<body>
</body>
<div id="text" style="text-align: center;"></div>
</html>

15.打印等腰三角形

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>style样式</title>
<style type="text/css">
.title{
border:1px solid red;
width: 200px;
height:200px;
background-color: yellowgreen
} </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";*/ dom.className="title";
} </script>
</head>
<body>
</body>
<div id="text" style="border: 1px solid red"></div>
</html>

16.style样式

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab切换</title>
<style type="text/css">
#tab{ width: 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{width: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>
</html>

17.tabs选项卡

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<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> <script type="text/javascript">
$(function(){
$("#myTabs").tabs({
active:1, //默认选中的tab
event:"mouseover" //触发的事件
})
}) </script>
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#a">第1个</a></li>
<li><a href="#b">第2个</a></li>
<li><a href="#c">第3个</a></li>
<li><a href="#d">第4个</a></li>
</ul>
<div id="a">第1个选项卡对应的</div>
<div id="b">第2个选项卡对应的</div>
<div id="c">第3个选项卡对应的</div>
<div id="d">第4个选项卡对应的</div> </div>
</body>
</html>

18.使用jquery实现

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动距离</title>
<style type="text/css">
*{margin:0;padding: 0;}
#box1{height:200px;width: 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>
</head>
<body>
<div id="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
</div>
<div id="text"></div>
</body>
</html>

19.滚动距离

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动距离</title>
<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; 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>
</head>
<body>
<div id="box">
<img src="data:images/cat.jpg" height="200px" width="200px">
</div>
</body>
</html>

20.飘浮图片

上一篇:Linux CentOS 6.5中安装与配置Tomcat-8方法


下一篇:004-redis-命令-哈希操作,列表操作