JavaScripts 效果实例

最新推荐文章于 2022-08-30 15:55:44 发布
最新推荐文章于 2022-08-30 15:55:44 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： javascript iframe image microsoft features function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dananhai381/article/details/2025632
版权

 横向和纵向滚动条的显隐

<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

页面跳转

Window.location.href 跳转到指定页面

Window.history.back  后退

Window.history.forward：前进

Window.history.go(n|URL)：在历史访问记录列表中跳转

表格变色

<TD οnmοuseοver="this.style.backgroundColor='#FFFFFF'"
οnmοuseοut="this.style.backgroundColor=''"
style="CURSOR: hand">

禁止复制，鼠标拖动选取

<body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false" οnmοuseup="document.selection.empty()">


普通iframe页面

<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>
iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no οnlοad="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>


IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标

<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">

字号缩放

越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

收藏夹、首页和源代码

  收藏夹：window.external.addFavorite (location.href，“科技”)
  首页： this.setHomePage('http://www.webkey.cn/lanren/')
  查看源代码： window.location=”view-source:”+this.location.href

记录并显示网页的最后修改时间

<script language=JavaScript>
document.write("最后更新时间: " + document.lastModified + "")
</script>

加在HEAD里 禁止缓存

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

打开窗口即最大化

<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>

加入背景音乐

<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
滚动
<marquee direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=2>滚动信息
</marquee>

消除ie6自动出现的图像工具栏

<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">

禁止页面正文内容被选取

<body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return
false"οnmοuseup="document.selection.empty()">

不能点右键，不用CTRL+A，不能复制

<body οncοntextmenu="window.event.returnValue=false"
οnkeypress="window.event.returnValue=false"
οnkeydοwn="window.event.returnValue=false"
οnkeyup="window.event.returnValue=false"
οndragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>

禁用右键菜单

      判断鼠标单击所使用的按键，通过event对象的button属性实现，IE和Netscape略有不同。


获得鼠标所在标签

      监听body的onmouseover事件

      获得事件的坐标

      获得坐标所在对象：oElement = document . elementFromPoint (iX ,iY )

 

随机变换背景图象（一个可以刷新心情的特效）

<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

动态切换图片

           image设置src属性动态置换图片


表单元素

             所有的表单元素具有的属性：    Type name value form(该元素引用的只读form)

 设置状态栏

              window.status='网站建设http://www.webmake.cn/'

离开时询问

      Onbeforeunload事件处理：退出浏览器，刷新页面，连接到其他页面时触发

      Window.confirm(text) 则会确认对话框

 

图片表单按钮

<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" οnclick="document.form1.submit()" />
</form>

手型鼠标

style="cursor:hand"

如何关闭层

<div id="Layer1"></div>
<a href="#" onClick="Layer1.style.display='none'">关闭层</a>

关闭窗口的脚本

<a href=javascript:close()>[关闭窗口]</a>

如果文字过长,则将过长的部分变成省略号显示

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>

进入主页后自动最大化

<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

高新普惠_搬砖手
关注
专栏目录
JavaScript 实例
z_once的博客
02-25 1404
JavaScript 是属于 HTML 和 Web 的编程语言。 编程令计算机完成您需要它们做的工作。 JavaScript 很容易学习。 本教程涵盖 JavaScript 基础和高级教程。
javascript案例
qq_15288543的博客
11-17 462
1.window弹窗案例  （1）创建一个页面，有两个输入项和一个按钮。按钮上有一个事件：弹出一个新窗口   （2）创建弹出页面，页面中有个表格，每一行有一个按钮，编号和姓名             按钮上的事件：把当前的编号和姓名，赋值到第一个页面的对应位置 function open1(){ window.open("user.html","","width=250,heigh
javascripts
10-14
window平台下9i和8i 好像不一样 。 9i 必须启动服务中的OracleServiceSID，如果没有启动的话，在命令行执行conn / as sysdba,会报：ORA-12560: TNS: 协议适配器错误。 而8i 既可以在服务中启动数据库，也可以在命令行启动
Java Script 学习笔记 -- 基础知识
weixin_30565199的博客
11-09 373
Java script 概述 java Script 的简介 　　JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 JavaScript 是属于网络的脚本语言！ J...
JavaScripts
b1720413663的博客
03-14 1784
第一章、HTML 1 、概念 HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的 标准标记语言。 标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。 HTML 运行在浏览器上，由浏览器来解析。 2、基本结构： HTML文档也叫web页面。 2.1、基本结构 –> 这是我的第一个HTML页面 hello html 这是我的第一个HTML页面 2.2、html注释 语法：
javascripts 一
wwwfdfsf的博客
07-17 184
倒计时 内置对象 作用域 对象
JavaScript效果实例精粹
03-08
本资源为ISO格式，下载后需要使用daemon来查看内容。里面的实例较为经典
javascript实现简单的鼠标拖动效果实例
10-24
在JavaScript中实现鼠标拖动效果是一项常见的任务，尤其在网页交互设计中。这个实例展示了如何通过JavaScript来创建一个简单的拖动元素的功能，让用户可以自由地在页面上移动指定的元素。以下是对这个实例的详细解析...
javascript用户注册提示效果的简单实例
10-26
JavaScript用户注册提示效果的简单实例中，展示了如何利用JavaScript来增强用户注册表单的体验。当用户在注册时，通常需要填写多项信息，例如用户名、密码、确认密码和邮箱地址等。为了避免用户因忘记填写某些信息而...
java script拖动特效代码
05-16
js拖动特效代码js拖动特效代码js拖动特效代码
初学Java Web页面间的登录跳转
05-21
初学Java Web页面间的登录跳转
JavaScript运动减速效果实例分析
10-23
主要介绍了JavaScript运动减速效果,模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用,需要的朋友可以...
JavaScript+canvas实现七色板效果实例
10-22
七色板效果实例的关键在于对canvas元素的使用。首先需要在HTML文件中添加一个canvas元素，并为其指定宽度、高度以及类名，以便在CSS中对其进行样式定义。页面加载完成后，通过JavaScript代码获取这个canvas元素的...
javascripts入门
weixin_44960008的博客
08-15 329
前端javascripts 声明、基本数据类型、原型链、传址与传值
JavaScripts基础知识整理（一）
dimingda的博客
08-19 359
1.JavaScript（编程语言） 运行在客户端的脚本语言。 最初用于表单验证，做网页特效，服务端开发node.js等等。 2.浏览器执行js原理 渲染引擎（解析html,css） js引擎（js解释器，谷歌的v8引擎很快解析js） 3.js组成三部分 ECMAScript(js语法) DOM（页面文档对象模型） BOM（浏览器对象模型） 4.三种嵌入html方法 行内，内嵌，外部。 <!DOCTYPE html> <html lang="en"> <head>
JavaScript的介绍及简单使用
Amos_zh的博客
05-28 669
什么是JavaScripts Javascript 是一种基于对象并具有安全性能的脚本语言， 是由浏览器内解释器翻译成可执行格式后执行， 在概念和设计方面， Java 和 Jvascript 是两种完全不同的语言。 Javascript 的四个特点： 基于对象的语言、 简单性、 动态性、 跨平台性 网页使用js脚本的三种方式 直接添加脚本 <html> <head> <title>demo1</title> &l
前端JavaScripts基础知识点轮播图
weixin_42218868的博客
03-29 730
1、index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$美少女战士$</title> <link rel="stylesheet" href="index.css"> </h...
javaScript是什么
所以的博客
08-30 807
是W3C组织推荐的处理可扩展语言的标准编程接口，通过DOM提供的接口可以对页面上面的各种元素进行操作(大小，位置，颜色等)：它提供了独立于内容的，可以和浏览器进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器转跳，获取分辨率。：规定了js变成语法和基础核心知识，是所有浏览器共同遵守的js语法工业标准。浏览器分成两部分：渲染引擎和JS引擎。...
JavaScript时钟实例详解：从基础到实践
该实例展示了如何使用JavaScript创建简单的动画效果，例如时钟指针的动态显示。通过这实例，我们可以了解JavaScript如何使用动画效果来增强用户体验。 六、JavaScript的实践应用 该实例展示了JavaScript在实践应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值