JS 電球をクリックして Web ページを点灯または消灯する特殊効果_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

JS 電球をクリックして Web ページを点灯または消灯する特殊効果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:58 AM

JS が Web ページをクリックすると、電球が点灯したり消えたりする特殊効果が得られます。 HTML における JS の役割について説明します。インターネットと Windows オペレーティングシステムの両方にとって、JavaScript は未来です。 (1) JavaScript: HTML 出力の書き込みコード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <p>  JavaScript 能够直接写入HTML输出流中：  </p>        <script type="text/javascript">  document.write("<h1>This is a heading</h1>");  document.write("<p>This is a paragraph.</p>");  </script>        <p>  您只能在 HTML 输出流中使用 <strong>document.write</strong>。  如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。  </p>  </body>  </html>

ログイン後にコピー

実行結果:

ヒント: document.write は HTML 出力でのみ使用できます。ドキュメントがロードされた後にこのメソッドを使用すると、ドキュメント全体が上書きされます。 (2) JavaScript: イベントに反応するコード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <h1>我的第一段 JavaScript</h1>        <p>  JavaScript 能够对事件作出反应。比如对按钮的点击：  </p>        <button type="button" onclick="alert('Welcome!')">点击这里</button>  </body>  </html>

ログイン後にコピー

ボタンをクリックした後:

JavaScript では、alert() 関数はあまり使用されませんが、コードのテストには非常に便利です。 onclick イベントは、このチュートリアルで学習する多くのイベントのうちの 1 つにすぎません。 (3) JavaScript: HTML コンテンツの変更 JavaScript を使用して HTML コンテンツを処理することは、非常に強力な機能です。コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <h1>我的第一段 JavaScript</h1>        <p id="demo">  JavaScript能改变HTML元素的内容。  </p>        <script type="text/javascript">  function myFunction()  {  x=document.getElementById("demo");  // 找到元素  x.innerHTML="Hello JavaScript!";    // 改变内容  }  </script>        <button type="button" onclick="myFunction()">点击这里</button>  </body>  </html>

ログイン後にコピー

クリック前:

クリック後:

document.getElementByID("some id") がよく表示されます。このメソッドは HTML DOM で定義されます。 DOM (Document Object Model) は、HTML 要素にアクセスするための公式 W3C 標準です。 (4) JavaScript: HTML 画像の変更この例では、HTMLのソース (src) を動的に変更します: 電球電球をクリックしてライトをオンまたはオフにしますサンプルコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <script type="text/javascript">  function changeImage()  {  element=document.getElementById('myimage')  if (element.src.match("bulbon"))    {    element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";    }  else    {    element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";    }  }  </script>        <img id="myimage" onclick="changeImage()"         src="http://www.w3school.com.cn/i/eg_bulboff.gif">        <p>点击灯泡来点亮或熄灭这盏灯</p>  </body>  </html>

ログイン後にコピー

クリックする前:

クリック後:

再度クリック後:

JavaScript は、画像だけでなく、HTML 要素のほとんどの属性を変更できます。これは最もクールな例の 1 つであり、古典的なものです。！ (5) JavaScript: HTML スタイルの変更 HTML 要素のスタイルの変更は、HTML 属性の変更の一種です。コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <h1>我的第一段 JavaScript</h1>        <p id="demo">  JavaScript 能改变HTML元素的样式。  </p>        <script type="text/javascript">  function myFunction()  {  x=document.getElementById("demo") // 找到元素  x.style.color="#ff0000";          // 改变样式  }  </script>        <button type="button" onclick="myFunction()">点击这里</button>        </body>  </html>

ログイン後にコピー

実行結果:

ボタンをクリック後:

(7) JavaScript: 入力の検証 JavaScript はユーザー入力の検証によく使用されます。コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <h1>我的第一段 JavaScript</h1>        <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>        <input id="demo" type="text">        <script type="text/javascript">  function myFunction()  {  var x=document.getElementById("demo").value;  if(x==""||isNaN(x))      {      alert("Not Numeric");      }  }  </script>        <button type="button" onclick="myFunction()">点击这里</button>  </body>  </html>

ログイン後にコピー

lian を入力した結果は次のようになります:

(7) HTML 要素の操作 JavaScript から HTML 要素にアクセスする必要がある場合は、document.getElementById(id) メソッドを使用できます。 HTML 要素を識別するには、「id」属性を使用してください: 例: 指定された ID を通じて HTML 要素にアクセスし、そのコンテンツを変更します:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>        <body>  <h1>My First Web Page</h1>        <p id="demo">My First Paragraph</p>        <script type="text/javascript">  document.getElementById("demo").innerHTML="My First JavaScript";  </script>  </body>  </html>

ログイン後にコピー

操作の結果は次のようになります:

JavaScript Web ブラウザを使用して実行されます。この場合、ブラウザは id="demo" を使用して HTML 要素にアクセスし、そのコンテンツ (innerHTML) を「My First JavaScript」に置き換えます。 (8) 警告 document.write() はドキュメントにコンテンツを書き込む場合にのみ使用してください。ドキュメントの読み込み終了後に document.write を実行すると、HTML ページ全体が上書きされます。コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>JS作用</title>  </head>     <body>  <h1>My First Web Page</h1>     <p>My First Paragraph.</p>     <button onclick="myFunction()">点击这里</button>     <script type="text/javascript">  function myFunction()  {  document.write("糟糕！文档消失了。");  }  </script>  </body>  </html>

ログイン後にコピー

ボタンをクリックした後:

元のテキスト: http://blog.csdn.net /erlian1992/article /details/49911787

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。