<!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("没事瞎点什么！！！")
}
}