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

js 实例 some3

    博客分类：
  • js
JavaScriptHTMLCC++C# 
阅读更多
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>
31.
从表格删除行
<html>
<head>
<script type="text/javascript">
function deleteRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex
  document.getElementById('myTable').deleteRow(i)
  }
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="删除" onClick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="删除" onClick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="删除" onClick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>
32.
向表格添加新行 - 然后向其添加内容
<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var x=document.getElementById('myTable').insertRow(0)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  y.innerHTML="NEW CELL1"
  z.innerHTML="NEW CELL2"
  }
</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="insRow()" value="插入行">
</body>
</html>
33对齐行中的单元格内容
<html>
<head>
<script type="text/javascript">
function leftAlign()
  {
  document.getElementById('header').align="left";
  }
</script>
</head>
<body>
<table width="100%" border="1">
<tr id="header">
<th>名</th>
<th>姓</th>
</tr>
<tr>
<td>John</td>
<td>Adams</td>
</tr>
</table>
<br />
<input type="button" onClick="leftAlign()" value="左对齐表格行" />
</body>
</html>
34垂直对齐行中的单元格内容
<html>
<head>
<script type="text/javascript">
function topAlign()
  {
  document.getElementById('tr2').vAlign="top";
  }
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>名</th>
<th>姓</th>
<th>文本</th>
</tr>
<tr id="tr2">
<td>John</td>
<td>Adams</td>
<td>你们好。我是名字是 John Adams。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。</td>
</tr>
</table>
<br />
<input type="button" onClick="topAlign()" value="上对齐表格行" />
</body>
</html>
35更改表格单元格中的内容
<html>
<head>
<script type="text/javascript">
function changeContent()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].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>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<form>
<input type="button" onClick="changeContent()" value="改变内容">
</form>
</body>
</html>
36.更改表元横跨的列数
<html>
<head>
<script type="text/javascript">
function changeColSpan()
  {
  document.getElementById("td1").colSpan="2";
  }
</script>
</head>
<body>
<table border="1">
<tr>
<th>名</th>
<th>姓</th>
</tr>
<tr>
<td id="td1">John</td>
<td id="td2">Adams</td>
</tr>
</table>
<br />
<input type="button" onclick=changeColSpan() value="改变 colspan" />
</body>
</html>
37简单的计时
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>
38
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
39无穷循环中的计时
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
40.
无穷循环中的计时 - 带有一个停止按钮
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>
</body>
</html>
41.一个时钟
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
  {i="0" + i}
  return i
}
</script>
</head>
<body onLoad="startTime()">
<div id="txt"></div>
</body>
</html>
<!---->
分享到：
| js 实例 some2
评论
发表评论

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

相关推荐

    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 实例代码

    3. **标记（Markers）** 标记是地图上的点，可以用来表示特定位置。创建标记使用`google.maps.Marker`类，并可以设置标记的位置、图标、是否可拖动等属性。例如： ```javascript var marker = new google.maps....

    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启动源生app(多种方法实例）

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

    js常用函数和实例应用

    3. **浏览器不支持时显示内容**：`&lt;noscript&gt;`标签用于当浏览器不支持JavaScript或者用户禁用了JavaScript时，显示替代内容。 4. **链接外部脚本文件**：如果JavaScript代码较多，可以将它们放在单独的`.js`文件中...

    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(实例讲解)

    3. 访问`iframe`的`document`对象：`iframeObject.contentWindow.document` 4. 操作`iframe`内的DOM元素：`iframeDocument.getElementById('elementId')` 5. 调用`iframe`内的方法：`iframeWindow.someFunction()` ...

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

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

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

    jsTree1.0开发技术指南

    jsTree 是一款基于 jQuery 的开源 JavaScript 库，用于构建交互式树状视图。随着版本更新至 1.0（pre1.0），jsTree 在 API 和使用方式上有了显著的变化。本文将深入探讨 jsTree 1.0 的核心概念、配置、操作以及插件...

    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`的基础类，...

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

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

    js插件的写法.编写javascript插件

    3. **配置选项**: 许多插件允许用户自定义行为，为此，我们可以定义一个配置对象，让用户通过参数传递配置： ```javascript var defaults = { option1: 'default value', option2: false }; MyPlugin.init =...

    jsTree-ver1.0开发技术指南定义.pdf

    创建 jsTree 实例，你需要选择一个容器元素，然后调用 `jstree` 方法，并传入配置对象： ```javascript jQuery("some-selector-to-container-node-here").jstree([ config_object ]); ``` 配置树的属性主要在 `...

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