ajax(3)之js+css基础

    技术2022-05-11  35

    代码:

    <dl id="d">

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

    <dd>dd1</dd>

    </dl>

     

    代码:

    <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>

     

     

    显示:

     

    代码:

     

    <!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 οnchange="document.getElementById('div1').style.backgroundColor=this.value" >

      <option value="#ffffff">请选择颜色</option>

     <option value="#ff0000">红色</option>

      <option value="#00ff00">绿色</option>

       <option value="#0000ff">蓝色</option>

        <option value="#ffffff">白色</option>

     </select>

     </BODY>

    </HTML>

     

    代码实现背景变色:

     

     

    <!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 使用id选择器-->

    <!-- 2 使用层次选择器-->

     </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 οnchange="document.getElementById('div2').className=this.value">

            <option value="style1">请选择</option>

            <option value="style2">样式一</option>

            <option value="style1">样式二</option>

           <option value="style3">样式三</option>

           <option value="style4">样式四</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" οnclick="play()"/> 

     </BODY>

    </HTML>

     

     

    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>

     请选择颜色:

     <select οnchange="changeAlpha(this.value)">

     <option value="99">透明度</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" οnclick="play()"/> 

      <input type="button" value="上一张" οnclick="play1()"/> 

     </BODY>

    </HTML>

     没有上传图片 请自己copy加上图片 用editplus浏览

    如有什么不足之处 请指正 谢谢


    最新回复(0)