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 之备忘大全
有则笑话,如此讲到:"老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成.我嘴一抽,来了句:人和动物最大的区别就是人会使用 ...

随机推荐

简单使用Apache POI
Apache POI是一个纯Java编写用来操作Microsoft Office的框架,最常见的应用是让服务器后台按照特定的数据生成Excel表格提供给用户实用.前段时间因为项目的需要被大量使用,使用 ...
Hello Spring Framework——源（Resources）
本文介绍Spring框架如何解析外部资源文件,仅参考官方文档<第7章 Resources>. ***************************以下是正文的部分************ ...
iOS AFNetworking HTTPS 认证
HTTPS 中双向认证SSL 协议的具体过程: 这里总结为详细的步骤: ① 浏览器发送一个连接请求给安全服务器. ② 服务器将自己的证书,以及同证书相关的信息发送给客户浏览器. ③ 客户浏览器检查服务 ...
javascript高级程序设计第四章变量、作用域和内存问题
变量包含两种,,基本类型和引用类型基本类型是指一些简单的字段: 引用类型是☞由多个值构成的对象引用类型的值是保存在内存中的对象,在javascript中是不允许直接访问内存中的位置; 函数的参数 ...
PHPStorm 与 XDebug 配置
XDebug 配置环境 Nginx 1.4.7 32 bit PHP 5.4.25 32 bit Windows 10 64 bit 下载 PHP 5.4 VC9 (32 bit)[nts版本] 配 ...
05 技术内幕 T-SQL 查询读书笔记（第四章）
第四章子查询:在外部查询内嵌套的内部查询(按照期望值的数量分为,标量子查询 scalar subqueries,多值子查询multivalued subqueries)(按照子查询对外部查询的依赖性 ...
Duilib改进窗口拖动，使整个窗口都能拖动两种方法(转载)
转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...
Cardboard开发教程：使用Unity制作Cardboard全景图片浏览器
这两年,虚拟现实(VR)领域很火,很多人认为这将会是下一个手机般改变人们生活的技术.目前全球最领先的还是Facebook旗下的Oculus,HTC VIVE,以及最流行的Cardboard.国内多家厂 ...
Oracle(创建视图)
概念: 视图:所谓视图就是提取一张或者多张表的数据生成一个映射,管理视图可以同样达到操作原表的效果,方便数据的管理以及安全操作. 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关 ...
VIM常用设置
批量替换: #:%s/source_pattern/target_pattern/g "My Custom Configuration filetype plugin indent on ...

javascript实例备忘

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

随机推荐

热门专题