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 id="This-is-a-heading">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 id="我的第一段-JavaScript">我的第一段 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 id="我的第一段-JavaScript">我的第一段 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  src="/static/imghwm/default1.png"  data-src="http://www.w3school.com.cn/i/eg_bulboff.gif"  class="lazy"  id="myimage" onclick="changeImage()" alt="JS 電球をクリックして Web ページを点灯または消灯する特殊効果_html/css_WEB-ITnose" >        <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 id="我的第一段-JavaScript">我的第一段 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 id="我的第一段-JavaScript">我的第一段 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 id="My-First-Web-Page">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 id="My-First-Web-Page">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 までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。