网页换肤：
<div>

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

 <script>

     var btn=document.getElementsByTagName("button");

     for(var i=0;i<btn.length;i++){

         btn[i].onclick=function(e){

         document.body.style.background=e.target.innerHTML;

         }

     }

 </script>
 
用循环改变元素背景：

<div id="s">

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

<button id="kk">yellow</button>

<script>

var btn=document.getElementById("kk");

btn.onclick=function(e){

var  len=document.getElementById("s").getElementsByTagName("button");

for(var i=0;i<len.length;i++){

   len[i].style.background=e.target.innerHTML;

         }

     }

 </script>
鼠标移入移出改变元素样式：
<div id="s">

<div>

<style>

#s{background: blueviolet;width: 200px;height: 100px;}

#s.d{background: red;width: 100px;height: 50px;}

}

</style>

     <script>

         var dd=document.getElementById("s");

         dd.onmouseover=function(){

        dd.classList.add("d");

         }

         dd.onmouseout=function(){

             dd.className=""; 

      }

     </script>

鼠标移入移出交替显示提示框
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onmouseover=function(){

        tips.style.display="block";

    }

    ss.onmouseout=function(){

        tips.style.display="none";

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
交替显示样式（三元运算符）
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onclick=function(){

        tips.style.display=(tips.style.display=="block")?"none":"block";

;

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
时钟（时分秒）
<script>

 setInterval(b,1000);

 function b(){

　　var date=new Date();

 　var a=[date.getHours(),date.getMinutes(),date.getSeconds()];

　　for(var i in  a ){

　　 document.getElementsByClassName("datee")[i].innerHTML=a[i];　

 }

 }

</script>

<span class="datee">

</span>:

<span class="datee">

</span>:

<span class="datee">

</span>
纯css下拉菜单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <ul id="nav">

             <li >Index

             <ul ><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

             </li>

             <li>About

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

             <li>News

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

         </ul>

     <style>

         #nav,#nav ul{list-style: none;}

         #nav li{margin-right:1em;font-size:110%;text-align:center;background:darkkhaki;float: left;width: 10em;color: darkcyan;cursor: pointer;border: 1px solid rosybrown;}

         #nav ul{display: none;padding: 0 ;}

         #nav ul li{padding:0;background:darkgray;float: none;padding: 10px;border: 0 none transparent;padding: 0;}

         #nav li:hover ul{display: block;}

     </style>

    </body>

</html>

dhtml的更多相关文章

  1. DOM和DHTML等，复习总结

    DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document: ...

  2. 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧. 目录 简介 成批处理DHTML更改 使用innerText 使用DOM添加单个元素 扩展SELE ...

  3. DHTML概述

    <!-- DHTML概述:动态的HTML.不是一门语言,是多项技术综合体的简称. 其中包含了HTML.CSS.DOM.JavaScript. 这四个技术在动态HTML页面效果定义时,都处于什么样 ...

  4. 链接，光标，DHTML，缩放

    18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...

  5. HTML、XHTML XML和DHTML的区别

    XML与HTML的设计区别是:XML是用来存储数据的,重在数据本身.而HTML是用来定义数据的,重在数据的显示模式 XHTML(The Extensible HyperText Markup Lang ...

  6. [DHTML]什么是DHTML？

    DHTML 将 HTML.JavaScript.DOM 以及 CSS 组合在一起,用于创造动态性更强的网页. DHTML 总结 DHTML 只是一个术语,它描述了 HTML.JavaScript.DO ...

  7. Chrome内嵌 FlashPlayer（PPAPI）会被页面DHTML元素遮住的问题

    flash的wmode为window,Chrome版本为29.0.1547.66 m,Flash PPAPI为11.8.800.97,Flash NPAPI为11,8,800,94. flash在正常 ...

  8. ExtJs之DHTML,DOM,EXTJS的事件绑定区别

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  9. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  10. DHTML 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.这个学习进度和前面几个学习进度,只是学习了 ...

随机推荐

  1. 【转】Cannot add or update a child row: a foreign key constraint fails 解决办法

    原因:设置的外键和对应的另一个表的主键值不匹配.解决方法:找出不匹配的值修改.或者清空两表数据. 转自https://blog.csdn.net/qq_29405421/article/details ...

  2. Hibernate学习笔记（三）—— Hibernate的事务控制

    Hibernate是对JDBC的轻量级封装,其主要功能是操作数据库.在操作数据库过程中,经常会遇到事务处理的问题,接下来就来介绍Hibernate中的事务管理. 在学习Hibernate中的事务处理之 ...

  3. Apache htaccess 设置....

    NC: no case,就是说不区分大小写R:redirect,重定向F:forbidden,禁止访问L:last,表示已经是最后一条规则,.htaccess文件解析即将退出 比如原地址为 /beau ...

  4. MySql 碎片

    查看某个表所占空间,以及碎片大小. select table_name,engine,table_rows,data_length+index_length length,DATA_FREE from ...

  5. dotnet体系结构

    一.C#与.NET的关系 1.粗略地説,.net是一种在Windows平台上的编程架构————一种API. 2.C#编译器专门用于.net,这表示用C#编写的所有代码总是使用.NET Framewor ...

  6. MITx: 6.00.1x Introduction to Computer Science and Programming Using Python Week 2: Simple Programs 4. Functions

    ESTIMATED TIME TO COMPLETE: 18 minutes We can use the idea of bisection search to determine if a cha ...

  7. 补档 Codeblocks下的文件标题栏（标签）显示方法

    可能在以下链接也能看到这篇文档 我知道很多人都不知道这个到底叫啥,还不如直接一点: 文件标题栏 就是如下的效果. 解决办法: 在左上角第三个view下,打开后取消Hide editor tabs 选项 ...

  8. BZOJ - 4260 01字典树+前后缀

    题意:给定\(a[1...n]\),求\((a_i⊕a_i+1⊕...⊕a_j)+(a_p⊕a_{p+1}⊕...⊕a_{q})\)的最大值,其中\(1≤i≤j<p≤q≤n\) 前后缀最优解预处 ...

  9. Dojo2 前端框架基本操作

    安裝CLI,需要先有npm: npm install -g @dojo/cli npm install -g @dojo/cli-create-app 创建项目目录,-n 后面是名字,创建完成后会自动 ...

  10. 再谈java枚举 ENUM

    [From] http://www.cnblogs.com/rollenholt/archive/2012/11/27/2790402.html 没有枚举之前: 在没有枚举之前,我们想列举一些相关的常 ...