网页更换主题以及绘制图形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& ...
随机推荐
- 在cms以及kindeditor中插入百度动态地图的方法
想在网页中插入动态地图不难,直接打开网址http://api.map.baidu.com/lbsapi/creatmap/,然后按照提示操作,最终生成脚本,放到html文件中即可.而在kindedit ...
- POJ 1456——Supermarket——————【贪心+并查集优化】
Supermarket Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- Unity C# string 与byte 直接的转换
指纹模版的转换 可还原字节数组byt string str = Convert.ToBase64String(bytes); byte[] bytes = Convert.FromBase64Stri ...
- Python 连接Sql Server数据库 MSSql
Python 想要和MSSql数据库进行交互,首先要下载名为"pymssql"的包,然后import该包即可. 地址:https://pypi.python.org/pypi/py ...
- 解析xml数据存入bean映射到数据库的 需求解决过程
解析xml数据存入bean映射到数据库的 需求解决过程2017年12月19日 15:18:57 守望dfdfdf 阅读数:419 标签: xmlbean 更多个人分类: 工作 问题编辑版权声明:本文为 ...
- C++ Knowledge series 2
Programming language evolves always along with Compiler's evolvement The semantics of constructors O ...
- lucene的使用与优化
1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...
- Windows server R2 2008上部署gogs git
所需的环境 1. 安装mysql 安装路径:F:\MySQL Server 5.7 2. 安装gogs ...
- 搭建vs2010 boost开发环境
一.编译boost库 第一步:下载boost库,下载地址http://sourceforge.net/projects/boost/files/boost/1.55.0/ 第二部:解压boost库,例 ...
- C语言头文件怎么写？（转载）
---恢复内容开始--- c语言头文件怎么写?我一直有这样的疑问,但是也一直没去问问到底咋回事:所以今天一定要把它弄明白! 其实学会写头文件之后可以为我们省去不少事情,可以避免书写大量的重复代码,还在 ...