用JavaScript制作页面特效

用JavaScript制作页面特效1.Window对象名称history:有关客户访问过的URL的信息location:有关当前URL的信息screen:有关客户端的屏幕和显示性能的信息常用方法prompt():弹出输入框

大家好,又见面了,我是你们的朋友全栈君。

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>

  运行结果

<span role="heading" aria-level="2">用JavaScript制作页面特效

点击“弹出窗口”后

 

<span role="heading" aria-level="2">用JavaScript制作页面特效

点击“弹出固定大小的窗口,并没有菜单栏等”后

<span role="heading" aria-level="2">用JavaScript制作页面特效

 

点击“全屏显示”后

<span role="heading" aria-level="2">用JavaScript制作页面特效

 

点击“关闭窗口”后,就可以关闭这个窗口了

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代码显示的页面

<span role="heading" aria-level="2">用JavaScript制作页面特效

点击“淘宝领奖了”之后,链接来源现实的是用document.referrer返回载入当前文档的文档的URL

当前网页文档的URL是使用document.URL返回当前文档的URL

<span role="heading" aria-level="2">用JavaScript制作页面特效

第二个HTML显示的结果

如果没有前一个文档,链接来源不会返回载入当前文档的文档的URL,会显示空白

只会返回当前文档的URL

<span role="heading" aria-level="2">用JavaScript制作页面特效

 

 

 

 

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;">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</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" /> &nbsp;&nbsp;
                        <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" /> &nbsp;&nbsp;
                        <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" /> &nbsp;&nbsp;
                        <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" /> &nbsp;&nbsp;
                        <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>

运行结果

全选

<span role="heading" aria-level="2">用JavaScript制作页面特效

 

全不选

<span role="heading" aria-level="2">用JavaScript制作页面特效

 

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.");
}

  运行结果

<span role="heading" aria-level="2">用JavaScript制作页面特效

8.今天遇到的问题

今天遇到一个问题用css怎么改变下拉列表select框的默认样式,我百度了一下,解决了这个问题 

<span role="heading" aria-level="2">用JavaScript制作页面特效

<span role="heading" aria-level="2">用JavaScript制作页面特效

代码

<!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属性超出部分不可见,即可覆盖小箭头,然后再为父级添加背景图片即可。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155249.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Apache struts2 namespace远程命令执行—CVE-2018-11776(S2-057)漏洞复现

    Apache struts2 namespace远程命令执行—CVE-2018-11776(S2-057)漏洞复现S2-057漏洞产生于网站配置xml的时候,有一个namespace的值,该值并没有做详细的安全过滤导致可以写入到xml上,尤其url标签值也没有做通配符的过滤,导致可以执行远程代码以及系统命令到服务器系统中去。启动环境后,在Win10上访问http://IP:port/struts2-showcase1.构建Payload:访问:http://your-ip:8080/struts2-showcase/$%7B233*233%7D/actionChain1.action.

  • python 安装CV2

    通常一个指令pipintsallopencv-python大多数的情况下,是可以的安装成功CV2,可是有时,这个指令安装的pip会出现CV2版本与python安装的版本,不匹配导致,你安装的opencv不成功,个人示例:1.先更新pippython-mpipinstall–upgradepip 2.从清华的镜像 `https://pypi.tuna.tsingh…

  • 3DCNN

    3DCNN学习论文Appearance-and-RelationNetworksforVideoClassification的时候看到了3DCNN,因为是第一次接触视频分类,因此,查询学习转自:https://blog.csdn.net/zouxy09/article/details/9002508最近看DeepLearning的论文,看到这篇论文:3DConvolutionalNeural…

  • 在phpstudy中nginx伪静态配置

    在phpstudy中nginx伪静态配置

  • 特殊文字符号小动物

    特殊文字符号小动物特殊符号[“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”,“????”]

  • SCCM配置PXE启动

    SCCM配置PXE启动最近一直在研究学习SCCM,发现目前在网上没有一篇完整的SCCM配置PXE启动来部署操作系统的详细文档,自己在学习的过程中也遇到了不少问题。因此就将遇到的问题和详细的配置过程,给大家分享一下。首先介绍下我的环境。为了方便配置在实验环境中我将DC(域控制器),DHCP,WDS,和SCCM安装在一台机器上。在安装完SCCM2007R2和初始的配置…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号