`
bobshute
  • 浏览: 284818 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 实例 some2

    博客分类：
  • js
JavaScriptHTML浏览器OperaC# 
阅读更多
1.<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("
")
document.write("浏览器版本："+ version)
<script type="text/javascript">
document.write("<p>浏览器：")
document.write(navigator.appName + "</p>")
document.write("<p>浏览器版本：")
document.write(navigator.appVersion + "</p>")
document.write("<p>代码：")
document.write(navigator.appCodeName + "</p>")
document.write("<p>平台：")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies 启用：")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>浏览器的用户代理报头：")
document.write(navigator.userAgent + "</p>")
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("
");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("
");
document.write("Name=" + x.appName);
document.write("
");
document.write("Version=" + x.appVersion);
document.write("
");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("
");
document.write("CPUClass=" + x.cpuClass);
document.write("
");
document.write("OnLine=" + x.onLine);
document.write("
");
document.write("Platform=" + x.platform);
document.write("
");
document.write("UA=" + x.userAgent);
document.write("
");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("
");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("
");
document.write("UserLanguage=" + x.userLanguage);
</script>
</body>
</html>
2.
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
  {alert("您的浏览器够先进了！")}
else
  {alert("是时候升级您的浏览器了！")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
3.
创建cookie：
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
4.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("您点击了鼠标右键！")
}
else
{
alert("您点击了鼠标左键！")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击。一个消息框会提示出你点击了哪个鼠标按键。</p>
</body>
</html>
5.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>
6.<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
  if (event.shiftKey==1)
    {
    alert("The shift key was pressed!")
    }
  else
    {
    alert("The shift key was NOT pressed!")
    }
  }
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>
</body>
</html>
7
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
8.
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
9.
<html>
<head>
<script type="text/javascript">
function getEventType(event)
  {
  alert(event.type);
  }
</script>
</head>
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
10
<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!
11.
<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
onfocus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
onfocus="setStyle(this.id)" id="lname" />
</body>
</html>
12.不让输入数字的文本框。
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onKeyDown="return noNumbers(event)" />
</form>
</html>
13.
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
  if (event.altKey==1)
    {
    alert("The ALT key was pressed!")
    }
  else
    {
    alert("The ALT key was NOT pressed!")
    }
  }
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the ALT key or not.</p>
</body>
</html>
14
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
  if (event.ctrlKey==1)
    {
    alert("The CTRL key was pressed!")
    }
  else
    {
    alert("The CTRL key was NOT pressed!")
    }
  }
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.</p>
</body>
</html>
15
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href="http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a>
<input type="button" onClick="changeLink()" value="改变链接">
<p>在本例中，我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。</p>
</body>
</html>
16 Checkbox - 把文本转换为大写
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
名：<input type="text" id="fname" size="20" />
<br /><br />
姓：<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onClick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
17
使用单选按钮中的 value 属性
<html>
<head>
<script type="text/javascript">
function check(browser)
  {
  document.getElementById("answer").value=browser
  }
</script>
</head>
<body>
<p>您喜欢哪款浏览器？</p>
<form>
<input type="radio" name="browser" onClick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是：<input type="text" id="answer" size="20">
</form>
</body>
</html>
18
重置表单
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onClick="formReset()" value="重置">
</form>
</body>
</html>
19验证表单
<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
{
alert("名字必须小于 10 个字符。")
submitOK="false"
}
if (isNaN(age)||age<1||age>100)
{
alert("年龄必须是 1 与 100 之间的数字。")
submitOK="false"
}
if (at==-1)
{
alert("不是有效的电子邮件地址。")
submitOK="false"
}
if (submitOK=="false")
{
return false
}
}
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onSubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交">
</form>
</body>
</html>
20 选取文本域中的内容
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧！">
<input type="button" value="选择文本" onClick="selText()">
</form>
</body>
</html>
21. 表单中的下拉列表
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onChange="favBrowser()">
  <option>Internet Explorer</option>
  <option>Netscape</option>
  <option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
22.
另一个下拉列表
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=txt + option
document.getElementById("result").value=txt
}
</script>
</head>
<body>
<form>
请选择数字：<br />
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onClick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
</body>
23 当达到文本域的最大字符数时跳至下一个域
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
  {
  document.getElementById("myForm").elements[next].focus()
  }
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onKeyUp="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onKeyUp="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onKeyUp="checkLen(this,this.value)">
</form>
</body>
</html>
23.重新加载文档
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="重新加载页面" onClick="reloadPage()" />
</body>
</html>
24.禁用并启用下拉列表
<html>
<head>
<script type="text/javascript">
function disable()
  {
  document.getElementById("mySelect").disabled=true
  }
function enable()
  {
  document.getElementById("mySelect").disabled=false
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<br /><br />
<input type="button" onClick="disable()" value="禁用列表">
<input type="button" onClick="enable()" value="启用列表">
</form>
</body>
</html>
25 更改下拉列表中的可见行数
<html>
<head>
<script type="text/javascript">
function changeSize()
  {
  document.getElementById("mySelect").size=4
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onClick="changeSize()" value="改变大小">
</form>
</body>
</html>
26 选择下拉列表中的多个选项
<html>
<head>
<script type="text/javascript">
function selectMultiple()
  {
  document.getElementById("mySelect").multiple=true
  }
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onClick="selectMultiple()" value="选择多个">
</form>
<p>在您点击 “选择多个” 按钮之前，请尝试同时选取多个选项。在点击 “选择多个” 按钮之后，请再试一次。</p>
</body>
</html>
27  取得下拉列表中所选的选项的索引位置
<html>
<head>
<script type="text/javascript">
function alertIndex()
  {
  var x=document.getElementById("mySelect").selectedIndex;
  var y=document.getElementsByTagName("option");
  alert(y[x].text + " has the index of: " + y[x].index);
  }
</script>
</head>
<body>
<form>
请选择您喜欢的水果：
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<br />
<br />
<input type="button" onClick="alertIndex()" value="显示被选水果的 index">
</form>
</body>
28.从下拉列表中删除选项
<html>
<head>
<script type="text/javascript">
function removeOption()
  {
  var x=document.getElementById("mySelect")
  x.remove(x.selectedIndex)
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onClick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>
29规定表格的内部边线
<html>
<head>
<script type="text/javascript">
function rowRules()
  {
  document.getElementById('myTable').rules="rows"
  }
function colRules()
  {
document.getElementById('myTable').rules="cols"
  }
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="rowRules()" value="仅显示行边框">
<input type="button" onClick="colRules()" value="仅显示列边框">
</body>
</html>
30为表格创建了一个标题
<html>
<head>
<script type="text/javascript">
function createCaption()
  {
  var x=document.getElementById('myTable').createCaption()
  x.innerHTML="我的表格标题"
  }
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="createCaption()" value="创建标题">
</body>
</html>
<!---->
分享到：
| js使用小技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsdialog_脚本实例_

    Collect some very practical and beautiful pop-up layer effect (compatible with the mainstream browsers) can be some of the the window contents or functions

    googlmap js api v3 实例代码

    2. **地图对象与事件监听** `google.maps.Map`是地图对象的构造函数，它可以绑定到HTML元素上。我们可以添加事件监听器，如点击地图触发的事件，来实现自定义功能。 3. **标记（Markers）** 标记是地图上的点，...

    JS经典实例大全（加个关注就行）.rar

    在“JS经典实例大全”这个压缩包中，包含了丰富的JavaScript编程实例，旨在帮助开发者深入理解和掌握这门语言的核心概念、语法以及实际应用技巧。 一、变量与数据类型 在JavaScript中，变量的声明使用`var`、`let`...

    vue项目中在外部js文件中直接调用vue实例的方法比如说this

    常见的做法是在main.js中导出Vue实例，然后在其他需要它的JavaScript文件中引入这个实例。通过这种方式，我们可以在外部文件中使用Vue实例的方法，而不是全局的window对象。具体操作步骤如下： 步骤一：在main.js中...

    很好的Javascript实例

    ### JavaScript 事件与应用实例详解 #### 一、概述 在网页开发中，JavaScript 是一种常用的客户端脚本语言，能够使网页具备动态交互能力。本文将重点介绍几个重要的JavaScript事件：`onBlur`, `onFocus`, `...

    js常用函数和实例应用

    4. **链接外部脚本文件**：如果JavaScript代码较多，可以将它们放在单独的`.js`文件中，然后通过`&lt;script&gt;`标签的`src`属性引入。例如： ```html &lt;script src="filename.js"&gt; ``` 5. **注释脚本**：JavaScript中...

    通过JS启动源生app(多种方法实例）

    本篇文章将深入探讨如何通过JS启动源生app，包括多种方法的实例。 首先，我们要理解这种交互的核心机制。HTML5和JavaScript运行在浏览器环境中，而原生app则拥有设备的全部权限。JS启动原生app主要是通过调用特定的...

    some knockout js and pages

    9. **页面应用实例**：在"some knockout pages"中，我们可以假设包含了一些使用Knockout构建的实际网页示例，这些页面可能包含了上述各种特性的实际应用，比如动态表格、响应式导航菜单、表单验证等。 10. **学习...

    javascript多窗口多框架实例

    frame1.contentWindow.document.getElementById('someElement').innerText = 'Hello, Frame!'; // 从子框架向父框架发送消息 window.parent.postMessage('From child frame', '*'); ``` 在实际应用中，多窗口和多...

    vue实例demo

    Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue实例是Vue应用的核心部分，它代表了Vue的根级组件。在这个“vue实例demo”中，我们将深入探讨如何使用Vue进行基本操作，包括集成vue-router进行...

    AjaxPro ajax无刷新 js调用后台代码 asp.net 实例

    这个实例将向我们展示如何使用AjaxPro实现JavaScript与后台代码的交互，从而实现页面的无刷新更新。 Ajax（Asynchronous JavaScript and XML）技术的核心在于通过JavaScript异步地与服务器进行数据交换，而无需重新...

    JS操作iframe里的dom(实例讲解)

    2. 访问`iframe`的`window`对象：`iframeObject.contentWindow` 3. 访问`iframe`的`document`对象：`iframeObject.contentWindow.document` 4. 操作`iframe`内的DOM元素：`iframeDocument.getElementById('elementId...

    JavaScript array常用方法代码实例详解

    JavaScript中的数组方法是编程中非常重要的工具，它们提供了丰富的功能，可以方便地操作和处理数组数据。在这篇文章中，我们将深入探讨几个常见的数组方法：`map()`、`reduce()`、`filter()`、`sort()`以及一些其他...

    struts2 实例源代码 +jsp页面

    本实例源代码提供了深入理解Struts2工作原理的机会，特别适合初学者和有经验的开发者学习和实践。 在`WebRoot`目录下，通常包含的是Web应用的静态资源，如HTML、CSS、JavaScript文件以及JSP（JavaServer Pages）...

    jsTree1.0开发技术指南

    jQuery("some-selector-to-container-node-here").jstree("operation_name", argument_1, argument_2, ...); ``` 2. 使用 `_reference` 方法获取树实例，然后调用相应方法： ```javascript jQuery.jstree._...

    JavaScript 数组some()和filter()的用法及区别

    下面通过实例来了解some()和filter()的用法。 some()的使用示例： ```javascript let array = [1, 2, 3, 4, 5]; let isGreaterThanThree = array.some(element =&gt; element &gt; 3); console.log(isGreaterThanThree);...

    Ajax实例源代码

    在"EXT JS"中，EXT JS是一个基于JavaScript的开源UI库，提供了丰富的组件和功能，用于构建富互联网应用程序（RIA）。EXT JS内置了强大的Ajax支持，允许开发者轻松地创建和管理Ajax请求。EXT JS的Ajax组件包括Ajax ...

    Base.js 库 实现 JS 的对象化编程

    Base.js 库通过提供一种更加结构化的方式来创建类和实例，增强了JavaScript的面向对象特性。 在传统的JavaScript中，我们可以通过构造函数和`prototype`来创建类的实例。Base.js 库引入了一个名为`Base`的基础类，...

    jquery+struts2实现异步刷新实例

    本实例将详细讲解如何利用jQuery库与Struts2框架结合，实现异步刷新功能。jQuery以其简洁易用的API深受开发者喜爱，而Struts2作为Java Web开发中的MVC框架，提供了丰富的动作和结果类型，便于构建动态网站。 首先，...

    Asp.Net MVC之jQuery与AJAX操作实例

    本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中，jQuery可以帮助开发者更...

Magicbox
Global site tag (gtag.js) - Google Analytics