<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tzy1.css" type="text/css">
    <script type="text/javascript" src="tzy1.js" language="JavaScript"></script>
</head>
<body>
<div id="div"><b id="b">我是一只小小鸟</b></div>
<form>
    <input type="button" value="随机改变字体颜色按钮" onclick="gbzt()">
    <input type="button" value="随机改变背景颜色按钮" onclick="gbbj()"></br>
    <input type="text" id="text">
    内容<input type="button" value="改变内容" onclick="gbtext()"></br>
    宽度<input type="text" id="gbwid">px
    <input type="button" value="改变背景宽度" onclick="gbwidth()"></br>
    高度<input type="text" id="gbhei">px
    <input type="button" value="改变背景高度" onclick="gbheight()"></br>
    <input type="reset" value="清空输入框"></br>
    <input type="button" value="字体隐藏" onclick="ycb()">
    <input type="button" value="全部隐藏" onclick="ycdiv()"></br>
    <input type="button" value="字体显示" onclick="xsb()">
    <input type="button" value="全部显示" onclick="xsdiv()"></br>
    <input type="button" value="是否重置" onclick="firm()">
</form>
</body>
</html>
div{
    color: forestgreen;
    background-color: coral;
    width: 100px;
    height: 100px;

}
var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var color;
function randomColor() {
    color="";
    for(var i=0;i<6;i++){
    var count = Math.floor(Math.random()*16);
    color += chars[count];
}
}
function gbzt() {
    randomColor();
    document.getElementById("div").style.color="#"+color;
}
function gbbj() {
    randomColor();
    document.getElementById("div").style.backgroundColor="#"+color;
}
function gbwidth() {
   var val = document.getElementById("gbwid").value;
   if(isNaN(val)||val==""){
       alert("必须输入数字,不能为空")
   }else{
    document.getElementById("div").style.width=val+'px';
   }
}
function gbheight() {
    var val = document.getElementById("gbhei").value;
    if(isNaN(val)||val==""){
        alert("必须输入数字,不能为空")
    }else{
        document.getElementById("div").style.height=val+'px';
    }
}
function gbtext() {
    var val = document.getElementById("text").value;
    document.getElementById("b").innerText = val;
}
function ycb() {
    document.getElementById("b").style.display = "none";
}
function ycdiv() {
    document.getElementById("div").style.display = "none";
}
function xsb() {
    document.getElementById("b").style.display = "block";
}
function xsdiv() {
    document.getElementById("div").style.display = "block";
    document.getElementById("b").style.display = "block"
}
function firm(){
    var yesorno = window.confirm("您确定取消所有设置么?")
    if(yesorno==true){
        window.location.replace("tzy1.html");
    }else{
        alert("没事瞎点什么！！！")
    }
}

HTML DOM应用案例1的更多相关文章

  1. DOM综合案例、SAX解析、StAX解析、DOM4J解析

    今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...

  2. 前端JavaScript之DOM使用案例

    1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> &l ...

  3. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  4. DOM操作案例之--全选与反选

    全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"> <t ...

  5. HTML DOM应用案例2

    <html> <head> <title>day03</title> <script type="text/javascript&quo ...

  6. JS DOM操作案例

    显示隐藏表单文本内容 <input type="text" value="手机"> var text = document.querySelecto ...

  7. JavaScript DOM详解

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52727448 本文出自:[余志强的博客] 一.DOM概述 D: Do ...

  8. 第二章 JavaScript案例（中）

    1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...

  9. DOM操作1

    1.DOM文档对象模型:操作页面元素(标签) html文件看成一个文档,把文档看成一个对象 xml也是一种文档,标签自定义,系统不自带标签,偏向于存储数据 2.DOM树:由文档及文档中的所以元素(标签 ...

随机推荐

  1. vue学习之指令简写以及事件笔记

    1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...

  2. django集成celery之callback方式link_error和on_failure

    在使用django集成celery进行了异步调度任务之后,如果想对失败的任务进行跟踪或者告警,怎么做? 这里提供一个亲测的方法. 1.任务callback 假如你想在任务执行失败的时候,打印错误信息并 ...

  3. Opencv怎么读入，显示，保存图像-OpenCV步步精深

    怎么读入图像呢? 我们用 img = cv2.imread('图像路径\原图像名称',0) 原图像名称要有后缀 .png , .jpg等等原图像带有的后缀. 这里我们着重说明一下图像路径,这个路径一定 ...

  4. Akka 的Actor

    从第一篇Akka笔记的介绍中,我们是从很高的高度去观察Akka工具箱中的Actors.在这篇笔记的第二篇,我们会看一下Actors中的消息部分.而且延续上一次的例子,我们还会使用同样的学生与老师的例子 ...

  5. 详解python命名空间和作用域

    1.典型案例 先从几个典型的案例来看下名称空间及作用域对python代码运行的影响,请看下面几个代码实例及其执行结果,是否符合你的预期. 代码1:块作用域 if True: i = 1 print i ...

  6. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  7. phpstudy升级mysql数据库

    因为MySQL支持全文索引的只有5.6以上,而我下的phpstudy只有5.5的版本,在导入数据库的时候因为该数据库的表内有使用全文索引,因此必须升级phpstudy的mysql版本,这里就把自己当升 ...

  8. 架构师必备软件：安装Dubbo注册中心(Zookeeper-3.4.6)

    Dubbo建议使用Zookeeper作为服务的注册中心. http://www.roncoo.com/details?cid=f614343765bc4aac8597c6d8b38f06fd 注册中心 ...

  9. nodejs项目管理之supervisor||pm2||forever

    supervisor 是开发环境用. forever 管理多个站点,每个站访问量不大,不需要监控. pm2 网站访问量比较大,需要完整的监控界面. supervisor 特点: 代码修改,实时重启 安 ...

  10. BandwagonHost搬瓦工VPS自建

    地址:https://bwh1.net/aff.php?aff=18648 ,购买$2.99的就够用了(现在没有$2.99的了,最低是$4.99) 步骤一: 步骤二: 步骤三:选图中的选项,然后点 A ...