网页更换主题以及绘制图形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& ...
随机推荐
- php 入门
<?php $username = $_POST["username"]; $passcode = $_POST["passcode"]; # 一定要my ...
- 基础7 面向对象进阶与socket编程
1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...
- Windows窗体应用开发3--配置标准控件1
1.掌握主要的Windows窗体控件的功能 2.掌握使用SplitContainer控件的方法 3.掌握使用TreeView控件的方法 注:新建一个WindowsForm 命名为Form2.cs 主要 ...
- Oauth服务端协议开发
授权流程图 AS : Authorization Server (权限服务器) RS : Resource Server (资源服务器) Client :Client RS(资源服务器)流程图 以上仅 ...
- sqlmap 命令详解（自备速查）
sqlmap速查 /pentest/database/sqlmap/txt/ common-columns.txt 字段字典 common-outputs.txt common-tables.txt ...
- ping过程详解
原出处:http://wanicy.blog.51cto.com/509018/335207/ PS:这里只是给出了ping ip地址的例子,没有给出ping域名的例子. ping 域名还有域名转换成 ...
- vue2.0 $router和$route的区别
在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...
- mac笔记本上的工具
svn可是换工具:cornerstone host修改工具:switchHosts!
- html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替
前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角 ...
- Azure 进阶攻略 | 上云后的系统，「门禁」制度又该如何实现？
各位办公室白领们,不妨回想一下自己每天去公司上班时的一些细节. 为避免「闲杂人等」进入工作场所,我们需要证明自己是这家公司的员工才能进入,对吧!所有员工,无论所属部门或职位,都必须先证明自己身份,例如 ...