用JavaScript制作页面特效
1.Window对象
名称
history：有关客户访问过的URL的信息
location：有关当前URL的信息
screen：有关客户端的屏幕和显示性能的信息
常用方法
prompt()：弹出输入框
alert()：弹出警告框
confirm()：弹出确认对话框
close()：关闭浏览器窗口
open()：
window.open("弹出窗口的url","窗口名称","窗口特征",)
setTimeout()：计时
setInterval()：计时
setTimeout和setInterval两者区别：setTimeout是定时程序，在什么时间做什么事情，setInterval是表示间隔一定时间反复执行某操作。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function open_adv() {
window.open("adv.html");
} function open_fix_adv() {
window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resize=0");
} function fullscreen() {
window.open("adv.html", "", "fullscreen=yes");
} function close_plan() {
window.close();
}
</script>
</head> <body>
<input type="button" value="弹出窗口" onclick="open_adv();" /><br />
<input type="button" value="弹出固定大小的窗口，并且没有菜单栏等" onclick="open_fix_adv();" /><br />
<input type="button" value="全屏显示" onclick="fullscreen();" /><br />
<input type="button" value="关闭窗口" onclick="close_plan();" />
</body> </html>
运行结果
点击“弹出窗口"后
点击“弹出固定大小的窗口，并没有菜单栏等”后
点击“全屏显示”后
点击“关闭窗口”后，就可以关闭这个窗口了
2.history对象的常用方法
back()：返回上一页
forward()：前进一页
go()：跳到指定页
history.back();后退一页
history.go(-1);后退1页，相当于“后退”按钮，等价于back()方法
3.location对象的常用属性和常用方法
常用属性
href：设置或返回url
如果没有登录，则跳转到登录页面
location.href="login.html";
常用方法
reload()：重新加载
replace()：用新的文档替换当前文档
4.Document对象的常用方法
referrer：返回载入当前文档的文档的URL
URL：返回当前文档的URL
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>领奖页面</title>
</head> <body>
<img src="img/d1.jpg" alt="中奖" />
<h1><a href="taobao.html">淘宝领奖了</a></h1>
</body> </html>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>奖品显示页面</title>
<script type="text/javascript">
document.write("链接来源：" + document.referrer + "<br/>");
document.write("当前网页文档的URL：" + document.URL);
</script>
</head> <body>
<h2> 淘宝网的商品购买页面：笔记本！数码相机！</h2>
</body> </html>
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
}
function showAllInput(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
function showOneInput(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
运行结果：
第一个HTML代码显示的页面
点击“淘宝领奖了”之后，链接来源现实的是用document.referrer返回载入当前文档的文档的URL
当前网页文档的URL是使用document.URL返回当前文档的URL
第二个HTML显示的结果
如果没有前一个文档，链接来源不会返回载入当前文档的文档的URL，会显示空白
只会返回当前文档的URL
getElementById()：返回对拥有指定id的第一个对象的引入
getElementById()：返回带有指定名称的对象的集合
getElementById()：返回带有指定标签名的对象的集合
write()：向文档写入HTML表达式或JavaScript代码
5.制作复选框全选/全不选效果
分析：设置同名的复选框组，“全选”复选框设置唯一ID
利用getElementsByName()访问同名复选框组
使用getElementById()访问“全选”复选框
根据“全选”复选框的状态，设置同名复选框勾选状态（checked属性）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>全选/全不选效果</title>
<style type="text/css">
.bg {
background-image: url(img/list_bg.gif);
background-repeat: no-repeat;
width: 730px;
} td {
text-align: center;
font-size: 13px;
line-height: 25px;
} body {
margin: 0
}
</style>
<script type="text/JavaScript">
function check()
{
var oInput=document.getElementsByName("product");
for (var i=0;i<oInput.length;i++)
{
if (document.getElementById( "all").checked==true)
{ oInput[i].checked=true;
} else {
oInput[i].checked=false;
}
}
}
</script>
</head> <body>
<table border="0" cellspacing="0" cellpadding="0" class="bg">
<form action="" method="post">
<tr>
<td style="height:40px;"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="font-weight:bold;">
<td><input id="all" type="checkbox" value="全选" onclick="check();" />全选</td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td colspan="4">
<hr style="border:1px #CCCCCC dashed" />
</td>
</tr> <tr>
<td><input name="product" type="checkbox" value="1" /></td>
<td><img src="img/list0.jpg" alt="alt" /></td>
<td>杜比环绕，家庭影院必备，超真实享受<br /> 出售者：ling112233
<br />
<img src="img/online_pic.gif" alt="alt" />
<img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br /> 2833.0 </td>
</tr>
<tr>
<td colspan="4">
<hr style="border:1px #CCCCCC dashed" />
</td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="2" /></td>
<td><img src="img/list1.jpg" alt="alt" /></td>
<td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br /> 出售者：aipiaopiao110 <br />
<img src="img/online_pic.gif" alt="alt" />
<img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br /> 6464.0 </td>
</tr>
<tr>
<td colspan="4">
<hr style="border:1px #CCCCCC dashed" />
</td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="3" /></td>
<td><img src="img/list2.jpg" alt="alt" /></td>
<td>精品热卖：高清晰，30寸等离子电视<br /> 出售者：阳光的挣扎 <br />
<img src="img/online_pic.gif" alt="alt" />
<img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br /> 18888.0 </td>
</tr>
<tr>
<td colspan="4">
<hr style="border:1px #CCCCCC dashed" />
</td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="4" /></td>
<td><img src="img/list3.jpg" alt="alt" /></td>
<td>Sony索尼家用最新款笔记本 <br /> 出售者：疯狂的镜无
<br />
<img src="img/online_pic.gif" alt="alt" />
<img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br /> 5889.0 </td>
</tr>
<tr>
<td colspan="4">
<hr style="border:1px #CCCCCC dashed" />
</td>
</tr>
</form>
</table> </body> </html>
运行结果
全选
全不选
6.创建Date对象
var 日期实例=new Date(参数);
var tdate=new Date();
返回当前日期及时间
document.write(today);
7.Date对象的常用方法
getFullYear()：获取年份
getMonth()：获取月份（0-11）
getDate()：获取号数（1-31）
getHours()：获取小时数（0-23）
getMinutes()：获取分钟数（0-59）
getSeconds()：获取秒数（0-59）
getDay()：获取星期几（0-6）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星期</title>
<script type="text/javascript" src="js/xingqi.js"></script>
</head>
<body>
</body>
</html>
JavaScript代码
var today=new Date();
var weekday=today.getDate();
document.write("今天星期"+weekday);
switch(weekday) {
case 5:
document.write(" finally Day!");
break;
case 6:
document.write(" super Day!");
break;
case 0:
document.write(" sleepy Day!");
break;
default:
document.write(" I'm looking forward to this weeked.");
}
运行结果
8.今天遇到的问题
今天遇到一个问题用css怎么改变下拉列表select框的默认样式，我百度了一下，解决了这个问题
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{
background:#CCCCCC no-repeat;
width: 100px;
height: 30px;
overflow: hidden;
}
#parent select{
background: transparent;//背景设置为透明
border: none;
padding-left: 10px;
width: 120px;
height: 100%;
}
</style>
</head>
<body>
<div id="parent">
<select>
<option>今天星期一</option>
<option>今天星期二</option>
<option>今天星期三</option>
</select>
</div>
</body>
</html>
我们需要为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的css属性超出部分不可见，即可覆盖小箭头，然后再为父级添加背景图片即可。
用JavaScript制作页面特效的更多相关文章
- 使用JavaScript制作页面特效2
1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...
- 利用Javascript制作网页特效（时间特效）
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- 【JavaScript制作页面时常用的五个特效，你用到了哪个？】
常用的五个特效的相关知识点见附录(五道例题后有附录哦~): 例一: 1.在某页面中有一个图片和五个超链接,如下图所示: 单击不同的数字超链接显示不同的图片: 图1 图片幻灯片显示效果 提示: (1)默 ...
- JavaScript制作时钟特效
需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...
- HTML+JavaScript制作表白特效，表白不成功，小编现场吃雪
今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看 下图是爱心飘落 ...
- 使用JavaScript制作页面效果3
一. 1.下拉列表:select对象 属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数 方法: add(option对象,添加位置):增加选 ...
- 利用Javascript制作网页特效（其他常见特效）
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
- 利用Javascript制作网页特效（窗口特效）
全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...
- 利用Javascript制作网页特效（图像特效）
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
随机推荐
- Python学习笔记-chapter1
我自幼时自觉聪慧,但实缺恒力,遂二十余岁却一事无成,亦无一技傍身,实属惭愧. 少时便仰慕于新兴世界之IT技术,然因惰性,未曾一日习学. 今陷此困境,聊以度日,反无端生出些许时间,便志要潜心研学,不求能 ...
- Kali Linux系统的安装、配置、使用
这个随便写的,随便看看就好,主要给讲一下安装过程 这里因为我物理机装的本来就是kali.所以懒得重装了,直接拿虚拟机演示一下 物理机安装kali的话,推荐使用rufus使用dd模式刻盘,不会造成之后的 ...
- 截取所有的winform runtime error
https://stackify.com/csharp-catch-all-exceptions/ AppDomain.CurrentDomain.FirstChanceException += (s ...
- transmission跳过文件校验功能实现
贴吧链接:https://tieba.baidu.com/p/4839039900 GitHub:https://github.com/superlukia/transmission-2.92_ski ...
- Python3字符串的操作
红色字体代表必须记住 str.capitalize():把字符串的第一个字符大写 str.casefold():转换字符串中所有大写字符为小写,其他语言(非汉语或英文)中把大写转换为小写的情况只能用 ...
- slb
第一章 弹性负载均衡slb概要介绍 第一讲什么是弹性负载均衡slb 互联网应用的服务扩展 负载均衡诞生 slb的引出 slb产品介绍 负载均衡 server load balancer 是对多台云 ...
- 批量写入redis
批量写入redis key := GetSeriesKey(series.Id) idNames = append(idNames, key, series.Name) == { err = Mset ...
- 快速搞定Word，提高你的工作效率
调整字体大小快捷键 ctrl+中括号 []分别减小字体加大字体 取消显示回车符号 文件->选项->显示->取消段落标记 对比两列内容是否相同 在第三列输入以下公式=IF ...
- 1.搭建Angular2项目
简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安 ...
- C语言之一维数组与指针
一维数组: 假如有一维数组如下: ]; 该数组有3个元素,数据类型为char型,地址空间如下. 如果想访问数据,直接使用a[0].a[1].a[2]取出相应地址空间的值即可 一级指针: 指针即地址,c ...