网页更换主题以及绘制图形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& ...
随机推荐
- IDEA部署Express工程
1.下载并安装Nodejs 2.通过Nodejs的NPM工具安装全局安装express工具,命令如下: npm install -g express@XXX npm install -g expres ...
- WPF 正確理解ContentPresenter
我們先由下圖來看類層次,可知ContentControl繼承Control,ContentPresenter繼承FrameworkElement(Control也繼承FrameworkElement) ...
- Cgroup blkio简介和测试（使用fio测试）
Cgroup blkio简介和测试(使用fio测试) 因需要对docker镜像内的进程对磁盘读写的速度进行限制,研究了下Cgroup blkio,并使用fio对其iops/bps限速进行测试. Cgr ...
- C#之Clone
因为类的实例是引用类型,要想用原有的类中的实例的数据的话,既要想创建原对象的一个副本的话,只能用clone方法. Clone方法分为深clone和浅clone 在C#中提供了浅clone的方法,即为M ...
- Oracle 内置函数
三. 字符函数(可用于字面字符或数据库列) 1,字符串截取 select substr('abcdef',1,3) from dual 2,查找子串位置 select instr('abcfdgfdh ...
- mysql-sql命令
##本单元目标 一.为什么要学习数据库 二.数据库的相关概念 DBMS.DB.SQL 三.数据库存储数据的特点 四.初始MySQL MySQL产品的介绍 MySQL产品的安装 ★ MySQL服务的启动 ...
- 单元测试模拟request后台
编写测试单元 @RunWith(SpringJUnit4ClassRunner.class) 让测试运行于Spring测试环境 @WebAppConfiguration是一个类级别的注释,用于声明Ap ...
- CSS 属性之中经常出现的百分比（转）
CSS 的属性值中经常会出现百分比,搞清它们的基数是一件很重要的事情.我特意查看了一下 W3C 的 CSS2.1 标准,在此整理下: 百分比单位 乘以包含块的宽度 margin, padding, l ...
- python类的反射
反射 通过字符串映射或者修改程序运行时的状态.属性.方法, 有一下4个方法 小例子--根据用户输入调用方法: class Dog(object): def __init__(self,name): s ...
- Strut2_声明式异常处理
Service 往外抛异常 public List<Category> list() throws SQLException{ Connection conn = DB.createCon ...