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+=" *"
}
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.飘浮图片
javaScript特效的更多相关文章
- JavaScript特效（调试笔记）
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
- 【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- javascript特效——烟花燃放的效果[xyytit]
春节临近,要做活动促销专题页面,百度了下,找到一些烟花燃放的特效,整理并添加了修改烟花各种参数的注释,便于大家修改使用,版权归原作者所有. 1. 示例效果:点击这里 下载源码:点击这里 2. Ht ...
- javascript特效：会随着鼠标而动的眼睛
这个特效非常简单,其中眼球和眼珠都是特定的图片.只要掌握好距离坐标就没问题.我就直接贴代码,有兴趣的朋友可以自己复制下来运行一下,下面的眼睛图像就是我的文件用到的图像,比较难看..我就把我的代码贴出来 ...
- JavaScript特效源码(7、页面特效二)
7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...
- JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
随机推荐
- DevExpress::XtraBars::BarEditItem获取EditValue值事件
//视图设计器中拖动一个barManager,添加一个bar,再添加一个BarEditItem控件,如下代码: private: DevExpress::XtraEditors::Repository ...
- BZOJ 1019 汉诺塔
Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. 对汉诺塔的一次合法的操 ...
- linux 修改目录文件权限，目录文件所属用户，用户组
1:查看命令:ll drwxr-xr-x 4 gamer ftp 4096 Mar 7 16:56 gstore drwxrwxrwx 10 root ftp 4096 De ...
- OPENFILER记下，有空再玩之，ISCSI，以后网络起来了，速度还是应该可以的
- ASCII是指128个字符（不是256个）和ASCII Extended Characters（就是那些奇怪的外文字符）
ASCII第一次以规范标准的型态发表是在1967年,最后一次更新则是在1986年,至今为止共定义了128个字元:其中33个字元无法显示(一些终端提供了扩展,使得这些字符可显示为诸如笑脸.扑克牌花式等8 ...
- 一段JAVA签名算法的PHP改写
源代码是这样的: public class AuthorizationSignature { public static String createSignature(String verb, Str ...
- [置顶] 技术人血泪史：七种IT失误让你直接走人
IT人士的真实故事:搞出大麻烦,旋即遭解雇 如今想找一份理想的IT工作并不容易,但丢掉一份工作却非常简单. 导致自己被炒鱿鱼的原因很多,无论是没能尽到保护雇主数字资产的义务.或者是滥用手中的权限以达到 ...
- nginx 配置多个主机
<pre name="code" class="html"> server { listen 8001; server_name localhost ...
- 【HDOJ】1484 Basic wall maze
BFS. /* 1484 */ #include <iostream> #include <queue> #include <string> #include &l ...
- ZOJ-2112-Dynamic Rankings(线段树套splay树)
题意: 完成两个操作: 1.询问一个区间里第k小的数: 2.修改数列中一个数的值. 分析: 线段树套平衡树,线段树中的每个节点都有一棵平衡树,维护线段树所记录的这个区间的元素.这样处理空间上是O(nl ...