网页更换主题以及绘制图形js代码实现
HTML代码实现：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>换肤主题</title>
<link rel="stylesheet" href="wupifu.css" id="link1">
<link rel="stylesheet" href="zuotu.css" id="link2">
<script>
window.onload = function () {
var obnt1 = document.getElementById('btn1');
var obnt2 = document.getElementById('btn2');
var obnt3 = document.getElementById('btn3');
var obnt4 = document.getElementById('btn4');
var obnt5 = document.getElementById('btn5');
var obnt6 = document.getElementById('btn6');
var obnt7 = document.getElementById('btn7');
var obody = document.getElementById('body'); setInterval(function(){
setTimeout(function () {
obody.style.backgroundColor = 'aqua';
}, 50)
setTimeout(function () {
obody.style.backgroundColor = 'blueviolet';
}, 100)
setTimeout(function () {
obody.style.backgroundColor = 'gold';
}, 150)
setTimeout(function () {
obody.style.backgroundColor = 'deeppink';
}, 200)
setTimeout(function () {
obody.style.backgroundColor = 'green';
}, 250)
setTimeout(function () {
obody.style.backgroundColor = 'blue';
}, 300)
setTimeout(function () {
obody.style.backgroundColor = 'blue';
}, 350)
obody.style.backgroundColor = 'darksalmon';
},400) obnt1.onclick = function () {
obody.style.backgroundColor = 'aqua';
}
obnt2.onclick = function () {
obody.style.backgroundColor = 'blueviolet';
}
obnt3.onclick = function () {
obody.style.backgroundColor = 'gold';
}
obnt4.onclick = function () {
obody.style.backgroundColor = 'deeppink';
}
obnt5.onclick = function () {
obody.style.backgroundColor = 'green';
}
obnt6.onclick = function () {
obody.style.backgroundColor = 'blue';
}
obnt7.onclick = function () {
obody.style.backgroundColor = 'darksalmon';
} var osetbtn = document.getElementById('setbtn');
var obox = document.getElementById('box'); osetbtn.onclick = function () {
obox.style.width = document.getElementById('width').value;
obox.style.height = document.getElementById('height').value;
obox.style.backgroundColor = document.getElementById('backgroud').value;
obox.style.border = document.getElementById('border').value;
obox.style.borderRadius = document.getElementById('borderR').value;
}
}
</script> <style>
#titl {
width: 840px;
height: 148px;
font-family: 'KaiTi';
background-color: bisque;
border: 1px solid gray;
position: relative;
margin: 0px auto;
} h1 {
text-align: center;
} #box {
margin: 0 auto;
}
</style>
</head> <body id="body">
<div id="titl">
<h1 style="color: brown">换背景颜色</h1>
<div id="btnin">
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
<button id="btn5"></button>
<button id="btn6"></button>
<button id="btn7"></button>
</div>
</div> <table id="tb">
<tr>
<td> <label>宽度：</label>
<input type="text" value="100px" id="width">
<br>
<br>
<br>
<label>高度：</label>
<input type="text" value="100px" id="height">
<br>
<br>
<br>
<label>图形颜色：</label>
<!-- <input type="text" value="gold" id="backgroud"> -->
<select name="" id="backgroud">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="black">黑色</option>
<option value="pink">粉色</option>
<option value="deeppink">深粉色</option>
<option value="hotpink">小粉色</option>
<option value="black">黑色</option>
<option value="pink">粉色</option>
<option value="darkorchid">黑兰花色</option>
<option value="darkorange">屎黄色</option>
<option value="orangered">橘黄色</option>
<option value="gold">金色</option>
<option value="yellow">黄色</option>
<option value="olive">橄榄色</option>
<option value="yellowgreen">黄绿色</option>
<option value="greenyellow">绿黄色</option>
<option value="lightgreen">轻绿色</option>
<option value="deepskyblue">天空蓝</option>
<option value="gray">灰色</option>
<option value="lightgray">亮灰色</option>
<option value="dodgerblue">闪蓝色</option>
<option value="chartreuse">黄绿色</option>
<option value="palegreen">淡绿色</option>
</select>
</select>
<br>
<br>
<br>
<label>边框：</label>
<input type="text" value="5px solid #000" id="border">
<br>
<br>
<br>
<label>圆角：</label>
<input type="text" value="0px" id="borderR">
<br>
<br>
<input type="button" value="设 置" id="setbtn">
</td>
<td>
<div id="box"></div>
</td>
</tr>
</table>
</body> </html>
CSS代码实现：
wupifu.css
#btn1{
width: 100px;
height: 50px;
background-color: aqua;
border-radius: 25px;
position: absolute;
left: 37px;
}
#btn2{
width: 100px;
height: 50px;
background-color: blueviolet;
border-radius: 25px;
position: absolute;
left: 150px;
}
#btn3{
width: 100px;
height: 50px;
background-color: gold;
border-radius: 25px;
position: absolute;
left: 260px;
}
#btn4{
width: 100px;
height: 50px;
background-color: deeppink;
border-radius: 25px;
position: absolute;
left: 369px;
}
#btn5{
width: 100px;
height: 50px;
background-color: green ;
border-radius: 25px;
position: absolute;
left: 477px;
}
#btn6{
width: 100px;
height: 50px;
background-color: blue ;
border-radius: 25px;
position: absolute;
left: 585px;
}
#btn7{
width: 100px;
height: 50px;
background-color: darksalmon ;
border-radius: 25px;
position: absolute;
left: 693px;
}
zuotu.css
#tb {
background-color: antiquewhite;
border: 1px solid black;
border-collapse: collapse;
margin: 100px auto;
}
#tb td {
width: 500px;
height: 400px;
border: 1px solid black;
vertical-align: center;
text-align: center;
}
#setbtn {
width: 100px;
height: 40px;
color: white;
background-color: #0181cc;
}
label {
font-size: 20px;
font-family: 'kaiti';
}
input {
height: 20px;
font-family: 'kaiti';
}
select {
font-size: 20px;
font-family: 'kaiti';
}
网页更换主题以及绘制图形js代码实现的更多相关文章
- 网页上图片点击放大js代码
//图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...
- JS 代码调试经验总结（菜鸟必读）
前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的 ...
- 2015.2.16 关于delphi web控件打开新网页时弹出关闭页面（js代码）出错的解决办法研究
参考网址1:http://www.csharpwin.com/csharpspace/2360.shtml...参考网址2:http://www.oschina.net/question/234345 ...
- 利用Google Chrome开发插件，在网页中植入js代码
Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的 ...
- 20行js代码制作网页刮刮乐
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  &l ...
- IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）
一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 网页中嵌入可以点击“运行代码”执行html/css/js代码
html代码 <textarea name="textarea" cols="60" rows="10" id="rn01& ...
随机推荐
- ubuntu14.04通过 gvm 安装 go语言开发环境
最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1．2．1不是最新版 所以上网上搜了 ...
- PHP 魔术方法__set() __get() 方法详解
__set() is run when writing data to inaccessible properties. __get() is utilized for reading data fr ...
- Unicode汉字编码表以及参考源码分享
1 Unicode编码表 Unicode只有一个字符集,中.日.韩的三种文字占用了Unicode中0x3000到0x9FFF的部分 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个 ...
- Javascript 学习之数组 Array
数组在Javascript中占有很重要的地位.任何控件开发离不开数组的使用. 构造函数 new Array( ) new Array(size) new Array(element0, element ...
- Props 和 IActorRef 3
在Actor模式中我们使用IActorRef通过ActorSystem来发送消息数据.这么做有两个理由 1.ActorSystem会在消息中封装一些元数据(metadata),这些数据我们可以通过上下 ...
- .NET 后台动态添加GridView列
BoundField bfColumn1 = new BoundField(); bfColumn1.DataField = "zbcompanyname"; bfColumn1. ...
- 从零开始的全栈工程师——js篇2.18（js的运动）
一.元素的 client offset scroll 三个系列 clientWidth / clientHeight / clientTop / clientLeftoffsetWidth / off ...
- 【起航计划 019】2015 起航计划 Android APIDemo的魔鬼步伐 18 App->Device Admin 设备管理器 DeviceAdminReceiver DevicePolicyManager PreferenceActivity的使用
Device Admin示例介绍了类DeviceAdminReceiver,DevicePolicyManager和ActivityManager. 使用DevicePolicyManager这个类, ...
- 2009中国IT界名人
丁 磊:网易创始人 李 想:泡泡网 辛佳雨:代码中国创始人 张朝阳:搜狐创业者之一 王志东:新浪网创业者之一 陈天桥:盛大网络创始人,中国互动娱乐业第一人 周鸿 ...
- 【转载】#402 - Value Equality vs. Reference Equality
When we normally think of "equality",we're thinking of value equality - the idea that the ...