javascript实例备忘

一，javascript动态显示：

如显示效果上图所示：

如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");//获取标签为a的内容
for (var i =0; i < links.length; i++) { //逐行遍历
var link = links[i];
link.onmouseover = onmouse; //当鼠标经过某行是调用onmouse函数
}
}
function onmouse() {
var div = document.createElement("div"); //动态创建div标签
div.style.position ="absolute"; //设置标签属性为手型
div.style.top = window.event.clientY; //设置y坐标
div.style.left = window.event.clientX; //设置x坐标
div.innerHTML ="saefagfawefaw<font color='red'>后卫噢服务和偶if</font>";//将要显示的内容添加到后面
document.body.appendChild(div); //将动态的div跟在body后面
}
</script>
</head>
<body onload="initEvent ()">
<a href="http://www.baidu.com" title="aesfwaef;ah">百度</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">新浪</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">谷歌</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">哈哈</a><br />
<br />
</body>

二：点击右键显示“你好”，点击左键显示禁止复制

<head>
<title></title>
<script type="text/javascript">
function MyClick() {
if (event.button ==1) {
alert("你好");
}
elseif (event.button ==2) {
alert("禁止复制");
}
else {
setTimeout("close();", 2000);
}
}
function close() {
window.opener =null;
window.close();
}
</script>
</head>
<body onmouseup="MyClick()">
<br />
</body>

三：动态走马灯显示

显示效果如图所示：

当点向左滚动式title字样向左，点击享有滚动按钮时title字样想又滚动

<head>
<title>新学期开学课！</title>
<script type="text/javascript">
var dir ="left"; //默认初始为向左
function huigun() {
if (dir =="left") { //当dir为left是向左滚动
var title = document.title; //取到title的值
var first = title.charAt(0); //取出第一个字
var last = title.substring(1, title.length); //取出第二到最后的所有字
document.title = last + first; //将第一个字加到最后
}
elseif (dir =="right") { //如果向右滚，则同理
var title = document.title;
var first = title.substring(0, title.length -1)
var last = title.charAt(title.length -1);
document.title = last + first;
}
else {
alert("方向错了");
}
}
function setdir(d) { //当鼠标点击按钮式同时给dir复制
dir = d;
}
setInterval("huigun()",500); //每隔0.5秒刷新一次
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="setdir('left');"/>
<input type="button" value="向右滚动" onclick="setdir('right');"/>
</body>

四：禁止复制小结

显示效果如图所示，将第一个手机号码复制粘贴到重复手机号码框时禁止复制

<input type="button" value="粘贴" onclick="clipboardData.setData('Text','我发现了个好网站，很黄很暴力'+location.href);alert('已经将信息复制到粘贴版中，请快速复制给好友');"/>
这是一篇文章
手机号码<input type="text"/>
重复手机号码<input type="text" onpaste="alert('为保证您的信息安全，请勿粘贴！');return false"/>

五：javascript遍历输出

示例代码：

<head>
<title></title>
<script type="text/javascript">
function as() {
var radios = document.getElementsByName("gander"); //遍历name为gander的值然后输出
for (var radio =0; radio < radios.length; radio++) {
var i = radios[radio];
alert(i.value);
}
}
</script>
</head>
<body>
<input type="radio" name="gander" value="男"/> 男
<input type="radio" name="gander" value="保密"/> 保密
<input type="radio" name="gander" value="女"/> 女
<input type="button" value="选择" onclick="as()"/>
</body>

六：哈哈呜呜交叉变化

显示效果如图：

点击某个按钮时当前点击的按钮显示呜呜，其他按钮显示哈哈

示例代码：

</head>
<body onload="btn()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>

七：协议倒计时（开始打开页面时倒计时10秒阅读时间，当十秒到后注册按钮可用）

示例效果如图：

示例代码：

<head>
<title></title>
<script type="text/javascript">
var leftSecond =10; //设定初始值
var inervalId;
function CountDown() {
var reg = document.getElementById("btnReg"); //取出id为btnreg的值
if (reg) {
if (leftSecond <=0) { //如果值小于等于0则按钮可用
reg.disabled ="";
// clearInterval(inervalId);
}
else { //如果值大于0
reg.value ="请仔细阅读，还剩"+ leftSecond +"秒"//将按钮的值改为…+设定值
leftSecond--; //设定值减1
}
}
}
inervalId = setInterval("CountDown()",1000); //每隔1秒刷新
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value ="注册" disabled="disabled"/> //按钮初始不可用
</body>

八：图片随鼠标移动

当鼠标移动到哪里，图片也移动到哪里

当鼠标位置发生变化时如图所示图片跟随鼠标一起变化位置，并且显示文字:哈哈！我会飞！

效果显示如图：

示例代码：

</head>
<body>
<div id="fly" style="position: absolute">
<img src="300png016.png"/><br />
哈哈！我会飞！
</div>
</body>

九，动态添加

<head>
<title></title>
<script type="text/javascript">
function on() { //点击按钮，添加百度
var links = document.createElement("<a href='http://www.baidu.com'>百度</a>");
links.innerHTML="百度"; //向连接中添加显示
document.body.appendChild(links); //将创建的连接追加到body中
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="on()"/>
</body>

十：动态高亮

鼠标移动上的当前行显示为红色，其余行显示为白色

}
}
}
</script>

</head>
<body onload="initEven()">
<ul id="football">
<li>曼联</li>
<li>中国</li>
<li>美国</li>
<li>阿根廷</li>
<li>西班牙</li>
</ul>
</body>

十一：动态放大

<body>
<div id="div1" style="width:10px;height:100px;border-style:solid;border:Red;border-width:1px;">
军事观察室_百度视频
</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');div1.style.width='200px';div1.style.height='200px';"/>
</body>

十二：动态无刷新显示详细内容

当勾选是现实详细内容“这是高级选项”当勾选取消时详细内容消逝

效果如图：

示例代码：

<head>
<title></title>
<script type="text/javascript">
function show(cb) {
var div = document.getElementById("Div");
if (cb.checked) {
div.style.display =""; //当勾选是现实为可见
}
else {
div.style.display ="none";
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbshow" onclick="show(this)"/><label for="cbshow">显示高级选项</label>
<div id="Div" style="display:none">这是高级选项</div> //将初始设为不可见
</body>
例二<body>
<a href="http://www.baidu.com" onmouseout="document.getElementById('baiduDiv').style.display='none'"onmouseover="document.getElementById('baiduDiv').style.display=''">百度网</a>
<div id="baiduDiv" style="display:none; border-color:Green; border-style:dotted; border-width:1px">
百度网是<font color="red">李彦宏</font>创建的，网址是：<a href="http://www.baidu.com">www.baidu.com</a></div>
</body>

十三：点击超链接变色但不打开连接

效果如图

当点击超链接时，不打开连接，只是将其背景颜色显示为红色

<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a"); //获取标签
for (var i =0; i < links.length; i++) { //遍历
var link = links[i];
link.onclick = onclick; //如果连接点击则触发事件！注javascript事件没有括号
}
}
function onclick() {
var links = document.getElementsByTagName("a");
for (var i =0; i < links.length; i++) {
var link = links[i];
if (link ==this) {
link.style.background ="red";
}
else {
link.style.background ="white";
}
}
window.event.returnValue =false; //禁止网页打开超链接
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.baidu.com">新浪</a><br />
<a href="http://www.baidu.com">新华</a><br />
<a href="http://www.baidu.com">谷歌</a><br />
<a href="http://www.baidu.com">优酷</a><br />
</body>

十四：隔行变色

</head>
<table id="tb">
<tr><td> 哈哈</td><td>23</td></tr><tr><td>窝窝</td><td>253</td></tr>
<tr><td>嘿嘿</td><td>45</td></tr><tr><td>呵呵</td><td>123</td></tr>
</table>
</body>

十五：获取焦点

效果如图

当鼠标点击文本框式变为红丝，当点击另外一个是之前那个变为绿色，点击哈哈按钮式红色变为绿色

}
}
function inputonfocus() {
this.style.background ="red";
}
function inputonblurs() {
this.style.background ="Green";
}
</script>

</head>
<body onload="initEvent()">
<input type="text"/><input type="text" /><input type="text"/><input type="text" /><input
type="text"/><input type="text" /><input type="text"/><input type="text" /><input
type="text"/><input type="text" /><input type="button" value="哈哈"/><input type="text" /><input
type="text"/><input type="text" /><input type="text"/>
</body>

十六：点击弹出登录窗口

效果如图：当点击登陆按钮时动态弹出登陆窗口，点击关闭按钮式关闭：

示例代码：

<head>
<title></title>
<script type="text/javascript">
function showLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='';
}
function hideLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='none';
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登录</a>
<div style="position: absolute; top: 200px; left: 200px; border-style: solid; border-color: Blue;
border-width: thin;display:none;" id="loginDiv">
<img src="data:images/close.JPG" onclick="hideLogin()" style="float: right"/>
<table>
<tr>
<td>
<label for="username">
用户名：</label>
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">
密码：</label>
</td>
<td>
<input type="password" id="passwordpassword"/>
</td>
</tr>
</table>
</div>
</body>

十七：搜索框效果

效果显示如图

示例代码：

<head>
<title></title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <=0) {
keyword.value ="输入搜索关键词";
keyword.style.color ="Gray";
}
}

function inputFocus(keyword) {
if (keyword.value =='输入搜索关键词') {
keyword.value ='';
keyword.style.color ='Black';
}
}
</script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="输入搜索关键词" style="color:Gray"/><input type="button" value="搜索一下" /><input id="Text1"/><input id="Text2" />
</body>

十八：评分五角星随鼠标移动显示（当鼠标放在五角星上时前面的显示为黑色五角星，后面的显示白色五角星）

如图显示

当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星

<head>
<title></title>
<script type="text/javascript">
function indexOf(arr, element) { //传入array数组和当前值
for (var i =0; i < arr.length; i++) {
if (arr[i] == element) { //第i个值等于当前值
return i; //返回i
}
}
return-1;
}
function initEvent() {
var rating = document.getElementById("rating"); //取id为rating的标签
var tds = rating.getElementsByTagName("td"); //在id为rating标签下去名字为td的值
for (var i =0; i < tds.length; i++) { //遍历
var td = tds[i];
td.style.cursor ='pointer'; //设置鼠标显示形式
td.onmouseover =function() { //当鼠标移动时… …
var rating = document.getElementById("rating"); //不用担心和initEvent中的rating、tds变量冲突，因为他们是两个函数，只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this); //调用函数indexof计算鼠标当前为值
for (var i =0; i <= index; i++) { //遍历鼠标之前的值
tds[i].innerText ='★'; //将其赋值为“★”
}
for (var i = index+1; i <tds.length; i++) { //遍历鼠标之后的值
tds[i].innerText ='☆'; //将其赋值为“☆“
}
};
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>

二十：无刷新评论

如图显示

示例代码

var table = document.getElementById("table"); //创建表格
var tr = document.createElement("tr"); //创建新行

var Nickname = document.createElement("td"); //创建昵称单元格
Nickname.innerText = nickname;
tr.appendChild(Nickname); //添加到新行

var Comm = document.createElement("td"); //创建评论单元格
Comm.innerText = input;
tr.appendChild(Comm); //添加到新行

table.tBodies[0].appendChild(tr); //将新行添加到表格中的tbody中，tBodies：一个表格允许有多个tbody。

}
</script>

</head>
<body>
<table id="table">
<tbody>
</tbody>
</table>
昵称：<input id="nickname" type="text"/><br />
<textarea id="comm"></textarea>
<input id="input" type="button" value="评论" onclick="pl()"/>
</body>

javascript实例备忘的更多相关文章

JavaScript学习备忘
1.您只能在 HTML 输出流中使用 document.write 如果在文档已加载后使用它(比如在函数中),会覆盖整个文档 2.数组 : [40, 100, 1, 5, 25, 10] <== ...
asp:Repeater实例备忘
1.前置部分 <asp:Repeater ID="rptPlanNo" runat="server" OnItemDataBound="rptP ...
[备忘]Asp.net MVC 将服务端Model传递的对象转为客户端javascript对象
<script type="text/javascript"> var jsObject = @Html.Raw(Json.Encode(Model.Objects)) ...
JavaScript 教程学习进度备忘(二)
备忘:之前,只将“JS 教程”学习完毕,这篇记录:“JS HTML DOM ”.“JS 对象”.“JS Window”.“JS 库” 书签:跳过:另外跳过的内容有待跟进 _______________ ...
Javascript备忘模式
使用备忘模式,利用了函数的自定义属性,先看一个例子 var test = function (){} test.myAttr = "attr"; 这样,就给test加上了一个自定义 ...
正则表达式备忘（基于JavaScript）
基于JS学习的正则表达式备忘 e.g.匹配以0开头的三位或四位区号,以-分格的7或8位电话号码var reg1 = /^0\d{2,3}\-\d{7,8}$/;或var reg1 = new Reg ...
get_template_part() 函数详解备忘（转）
最近研究官方主题 Twenty Eleven ,有一些东西网上现成的中文资料不好找,在博客里记载下来,算是分享,也算是备忘,wordpress 3.0 以后就开始便有了get_template_par ...
基于Prism.Windows的UWP开发备忘
以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项 ...
Npm vs Yarn 之备忘大全
有则笑话,如此讲到:"老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成.我嘴一抽,来了句:人和动物最大的区别就是人会使用 ...

随机推荐

Curling 2.0
Description On Planet MM-21, after their Olympic games this year, curling is getting popular. But th ...
EditText光标颜色设置
又一次做应用,发现EditText没有显示光标,借鉴了网上的方法,发现是因为光标是白色的,与背景一样造成的,这里记录一下如何设置EditText等的光标颜色: 需要在布局文件中指定androd:tex ...
TopCoder kawigiEdit插件配置
kawigiEdit插件可以提高 TopCoder编译,提交效率,可以管理保存每次SRM的代码. kawigiEdit下载地址:http://code.google.com/p/kawigiedit/ ...
类传奇手游简单Demo
这是一年多前自己闲时以Unity2D制作的很粗糙简单的传奇类手游Demo(单机),已很久未作继续开发. 此小Demo初步完成或实现了如下功能(有诸多考虑欠妥甚至不完善之处): 1).图片资源打包方式. ...
nodejs httpserver
用nodejs服务器去拿取后台的数据.(我刚开始学的nodejs的时候是一个蒙圈的宝宝 t.t,开始接触的时候,在本地搭建去拿数据.之前菜鸟的我都不知道路由是神马[囧囧]). --> index ...
sharepoint 2013 开发环境安装
Sharepoint 介绍 Sharepoint 可以帮助企业用户轻松完成日常工作中诸如文档审批.在线申请等业务流程,同时提供多种接口实现后台业务系统的集成,它将 Office 桌面端应用的优势结合 ...
python操作Excel--使用xlrd
一.安装xlrd http://pypi.python.org/pypi/xlrd 二.使用介绍 1.导入模块 import xlrd 2.打开Excel文件读取数据 data = xlrd.open ...
区分debug和release生成文件的名称
通常我们编译工程按照debug和release区分,且明确在Debug版本的生成文件中加入d标记.譬如: HelloWorld.exe 一般是release的生成文件,而debug版叫:HelloWo ...
Node聊天程序实例01
作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. 本实例要实现 ...
white-space: nowrap 与字符串（文本）换行
在需要对字符串进行元素内换行时,我们通常要对该元素设置相关属性约束以及宽度. 例如:style="word-wrap:break-word; word-break: break-all; w ...

javascript实例备忘

javascript实例备忘的更多相关文章

随机推荐

热门专题