用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="弹出窗口" οnclick="open_adv();" /><br /><input type="button" value="弹出固定大小的窗口,并且没有菜单栏等" οnclick="open_fix_adv();" /><br /><input type="button" value="全屏显示" οnclick="fullscreen();" /><br /><input type="button" value="关闭窗口" οnclick="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属性超出部分不可见,即可覆盖小箭头,然后再为父级添加背景图片即可。
转载于:https://www.cnblogs.com/zp-frighting/p/10492767.html
用JavaScript制作页面特效相关推荐
- 使用JavaScript制作页面特效2
1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- JavaScript制作页面倒计时器
制作页面倒计时器,选定一个未来时间,得到几天几时几分几秒的倒计时. 在这里选择使用两个时间相差的毫秒数来计算相对应的天数.小时数.分钟数和秒数.为了使代码看起来简洁,进行了封装函数. 1.setInt ...
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- 教你用JavaScript制作鼠标特效
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个鼠标爱心特效.鼠标在页面移动时会出现彩色爱心特效.通过实战我们将学会createE ...
- 用javaScript制作爱心特效
爱心特效 源代码 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 使用JavaScript制作页面效果3
一. 1.下拉列表:select对象 属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数 方法: add(option对象,添加位置):增加选 ...
- 利用Javascript制作网页特效(图像特效)
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)';this. ...
最新文章
- 1、集合--相关概述
- 手把手教你从Core Data迁移到Realm
- java 自定义运算符_Java中集合的自定义运算符
- spray.json_如何使用Spray-json(Un)在Akka HTTP中封送JSON
- 手机百度输入法的用户体验
- cron 每周一执行_详解定时任务中的 cron 表达式
- acm 凹多边形面积_解析几何|面积的计算
- Android 系统性能优化(80)---Android性能优化:这是一份详细的布局优化 指南(含lt;includegt;、lt;Viewstubgt;、lt;mergegt;)
- flex eclipse综合spring入门
- Surface Capture for Performance-Based Animation
- BootStrap入门响应式栅栏
- 《手把手教你学DSP-基于TMS320F28335》书中的错误
- 闹钟android 代码,android 闹钟app源码(Alarm)
- 【离散数学】偏序集Hasse图的画法和重要元素
- matlab randn state 2,randn('state',0)是什么意思?
- 火影忍者新忍出击服务器正在维修,火影忍者手游更新公告 新忍出击资源翻倍...
- 抽象类和抽象方法_30酷抽象和背景Photoshop教程
- 赵小楼《天道》《遥远的救世主》深度解析(114)时刻要认清自己的本位
- python 键盘输入数字_python实现键盘输入的实操方法
- 细节:如何轻松影响他人
热门文章
- 【机器学习】支持向量机(Suport Vector Machine)数学推导
- 激光SLAM后端优化总结之卡尔曼滤波
- Mysql任意读取客户端文件,Mysql任意读取客户端文件
- UnityShader_使用几何着色器实现草坪效果(简易)
- SWC与SWF的区别
- 使用 ISAR 数据库提供离线 Flutter 支持
- 用Scratch实现足球AI,撞进机器人世界杯
- 定制Eclipse的Content assist(代码补全),比如空格键不上屏
- ​提高免疫力,没你想得这么难!
- OPENWRT lede MT7628dan 增加SPI接口