网页更换主题以及绘制图形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& ...
随机推荐
- [一点一滴.NET]前台线程和后台线程
前台线程和后台线程就是通过线程实例的属性IsBackground=true or false来区分的. 新建一个线程是默认是后台线程. 前台线程全部执行完之后,才退出进程. 进程退出,所有的后台线程全 ...
- redis要注意的一些知识
除了存取数据,redis还可以支持mq等操作,这里面有些小细节,需要注意一下: ---------------------------------------- 1.事务处理 大家都说redis支持事 ...
- 数据结构之C语言模拟整数数组实现
#include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...
- jQuery源代码学习笔记_bind
一般想到JS的兼容性问题的时候,首先会想到addEventListener与attachEvent这一对冤家,那么我们先来看看它们有什么兼容性问题 addEventListener与attachEve ...
- CSS选择器比较：queryselector queryselectorall
官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...
- Machine learning preface
Machine learning Preface Definition T: Task E: Experience P: Performance Sequence: T -> E -> P ...
- Entity Framework中IQueryable, IEnumerable, IList的区别[转]
使用工具追踪EF生成的SQL 使用Entity Framework等ORM框架的时候,SQL对于使用者来说是透明的,往往很多人也不关心ORM所生成的SQL,然而系统出现性能问题的时候就必须关注生成的S ...
- 树莓派WLAN连接PC（不通过路由器）
上一篇博文捣鼓了一下树莓派直连线连接PC.吃完午饭心血来潮,树莓派既然能用直连线连接PC,曾经也试过拿PC当作热点,为何不尝试一下用WLAN将树莓派与PC互连呢?果断搞起. 首先,我当前笔记本是用WL ...
- mac笔记本上的工具
svn可是换工具:cornerstone host修改工具:switchHosts!
- Android基础Activity篇——销毁活动
销毁活动只需要添加 finish(); 这个方法即可.相当于back键.