Ajax (3) + css based js

Posted by john
4/24/2007
Related Tags:

  Code: 

  <dl Id="d"> 

  <dt Id="daaa"> dt1 </ dt> 

  <dd> Dd1 </ dd> 

  </ Dl> 


  Code: 

  <dl Id="d"> 

  <dt Id="daaa"> dt1 </ dt> 

  <dd> Dd1 </ dd> 

  </ Dl> 

  <SCRIPT LANGUAGE="JavaScript" type="text/javascript"> 

  <! - Var d = document.getElementById ( "d"); 

  Var dd = document.createElement ( "dd"); 

  Var tn = document.createTextNode ( "dd2"); 

  Dd.appendChild (tn); 

  D.appendChild (dd); 

//-->

  </ SCRIPT> 

  Show: 

  Code: 

  <! DOCTYPE html PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  </ HEAD> 

<BODY>

  <div Id="div1"> 

<ul>

  <li> Hello world1 </ li> 

  <li> Hello world2 </ li> 

  <li> Hello world3 </ li> 

  </ Ul> 

  </ Div> 

  <select Onchange="document.getElementById('div1').style.backgroundColor=this.value"> 

  <option Value="#ffffff"> select colors </ option> 

  <option Value="#ff0000"> red </ option> 

  <option Value="#00ff00"> green </ option> 

  <option Value="#0000ff"> blue </ option> 

  <option Value="#ffffff"> white </ option> 

  </ Select> 

  </ BODY> 

  </ HTML> 

  Background discoloration code: 

  <! DOCTYPE HTML PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  <style Type="text/css"> 

  <! -- 

  Div # div1 (font-style: italic;) 

  Div # div2 ul li (font-style: bold;) 

-->

  </ Style> 

  <! - 1 choice to use id -> 

  <! - 2 level use options -> 

  </ HEAD> 

<BODY>

  <div Id="div1"> 

<ul>

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  </ Ul> 

  </ Div> 

  <div Id="div2"> 

<ul>

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  </ Ul> 

  </ Div> 

  </ BODY> 

  </ HTML> 

  <! DOCTYPE HTML PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  <style Type="text/css"> 

  <! -- 

  . Style1 (background-color: # ffffff; color: # 000000;) 

  . Style1 ul li (list-style-type: circle;) 

  . Style2 (background-color: # 000000; color: # ffffff;) 

  . Style2 ul li (list-style-type: disc;) 

  . Style3 (background-color: # 0000ff; color: # ff0000;) 

  . Style3 ul li (list-style-type: disc;) 

  . Style4 (background-color: # ff0000; color: # ffff00;) 

  . Style4 ul li (list-style-type: circle;) 

-->

  </ Style> 

<BODY>

  <div Id="div2"> 

<ul>

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  <li> Hello! How are you! </ Li> 

  </ Ul> 

  </ Div> 

  <select Onchange="document.getElementById('div2').className=this.value"> 

  <option Value="style1"> select </ option> 

  <option Value="style2"> form a </ option> 

  <option Value="style1"> style of </ option> 

  <option Value="style3"> style 3 </ option> 

  <option Value="style4"> style 4 </ option> 

  </ Select> 

  </ BODY> 

  </ HTML> 

  <! DOCTYPE HTML PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  </ HEAD> 

  <style Type="text/css"> 

  <! -- 

  (Div # div1 height: 240px; filter: BlendTrans (duration = 1);) 

-->

  </ Style> 

  <SCRIPT LANGUAGE="JavaScript"> 

  <! -- 

  Function play () 

  ( 

  Var div1 = document.getElementById ( "div1"); 

  Div1.filters [0]. Apply (); 

  Div1.innerHTML = "<img src='2.jpg' alt='' height=300 width=300 />"; 

  Div1.filters [0]. Play (); 

  ) 

//-->

  </ SCRIPT> 

<BODY>

  <div Id="div1"> 

  <img Src="1.jpg" alt="" height="300" width="300"/> 

  </ Div> 

  <input Type="button" value="play" onclick="play()"/> 

  </ BODY> 

  </ HTML> 

  After the show by play 

  <! DOCTYPE HTML PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  <style Type="text/css"> 

  <! -- 

  (Div # div1 height: 240px; 

  Filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 20); 

  ) 

-->

  </ Style> 

  <SCRIPT LANGUAGE="JavaScript"> 

  <! -- 

  Function changeAlpha (value) 

  ( 

  Var div1 = document.getElementById ( "div1"); 

  Div1.filters [0]. Opacity = value; 

  ) 

//-->

  </ SCRIPT> 

  </ HEAD> 

<BODY>

  <div Id="div1"> 

  <img Src="1.jpg" alt="" height=300 width=300 /> 

  </ Div> 

  Please select Color: 

  <select Onchange="changeAlpha(this.value)"> 

  <option Value="99"> transparency </ option> 

  <option Value="20"> 20 </ option> 

  <option Value="40"> 40 </ option> 

  <option Value="60"> 60 </ option> 

  <option Value="80"> 80 </ option> 

  </ Select> 

  </ BODY> 

  </ HTML> 

  <! DOCTYPE HTML PUBLIC "- / / W  3C   / / DTD HTML 4.0 Transitional / / EN "> 

<HTML>

<HEAD>

  <TITLE> New Document </ TITLE> 

  </ HEAD> 

  <style Type="text/css"> 

  <! -- 

  (Div # div1 height: 240px; filter: BlendTrans (duration = 1);) 

-->

  </ Style> 

  <SCRIPT LANGUAGE="JavaScript"> 

  <! -- 

  Var i = 1; 

  Function play () 

  ( 

  If (i <6) 

  ( 

  Var div1 = document.getElementById ( "div1"); 

  Div1.filters [0]. Apply (); 

  I = i +1; 

  Div1.innerHTML = "<img src='"+i+".jpg' alt='' height=300 width=300 />"; 

  Div1.filters [0]. Play (); 

  ) 

  ) 

  Function play1 () 

  ( 

  If (i <= 6 & & i> 1) 

  ( 

  Var div1 = document.getElementById ( "div1"); 

  Div1.filters [0]. Apply (); 

  I = i-1; 

  Div1.innerHTML = "<img src='"+i+".jpg' alt='' height=300 width=300 />"; 

  Div1.filters [0]. Play (); 

  ) 

  ) 

//-->

  </ SCRIPT> 

<BODY>

  <div Id="div1"> 

  <img Src="1.jpg" alt="" height="300" width="300"/> 

  </ Div> 

  <SCRIPT LANGUAGE="JavaScript"> 

  </ SCRIPT> 

  <input Type="button" value="下一张" id="btn1" onclick="play()"/> 

  <input Type="button" value="上一张" onclick="play1()"/> 

  </ BODY> 

  </ HTML> 

  No picture upload your own copy with the picture here editplus 

  What if inadequacies of the requested correction Thank you 




Related articles:

Website Design beginner and uncertainty of how to design web pages
  How to design web pages?    In the understanding of web design, it seems that many people are still in the height of creating web pages.    Think that as long as the proper use of the web page authoring software, web design will be able to do a good job in the……  &...
Shortcuts, such as prohibiting the Ctrl JS code
  Prohibition ctrl n and the prohibition of ctrl r shift f10 prohibition and the prohibition of the right mouse button or key and around the JS code prohibiting f5  <script>   / / Ctrl n prohibition and the prohibition of ctrl r shift f10 prohibition and the prohibition of th...
AJAX integration in the development of database technology
  I. INTRODUCTION    Today, a considerable number of Web applications, such as Backpack, Blinksale and Gmail regarded AJAX integration with database technology together.    Communication with the database by providing updated browser without this powerful technology, which ...
Pages on the layout of the interview
  1. Page layout what is your favorite?    Alistair Beattie:    I would not like a separate Web site, others will not.    I would like to judge quality of a web site should be the sole criterion for whether it is useful.    But for the success of this W...
FW MX 2004 Directory (11): automatic operation
  In Fireworks, automation applications can save us a lot in image processing or page production process in the operation of some of the same steps, thereby effectively save time and improve work efficiency.    1, the "Find" panel    Use the "Find" pane...