好吧，不是所有的东西，但颜色编码出错了，没有什么似乎有帮助请指导我在this site，代码全在这里：
<!DOCTYPE html>
<html>
<head>
<!--<script type="text/javascript">(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$(".fontcolors").hide();
$(".ncolors").hide();
$(".pcolors").hide();
$("#imggg").hide();
$(".colors").hide();
$(".plushead").click(function(){
$("#heading").css({ "font-size": "+=2px"});
});
$(".minushead").click(function(){
$("#heading").css({ "font-size": "-=2px"});
});
$(".plusname").click(function(){
$("#name").css({ "font-size": "+=2px"});
});
$(".minusname").click(function(){
$("#name").css({ "font-size": "-=2px"});
});
$(".plusbody").click(function(){
$("#body").css({ "font-size": "+=2px"});
});
$(".minusbody").click(function(){
$("#body").css({ "font-size": "-=2px"});
});
$(".hider").click(function(){
$("#custom").hide();
});
$("#next1").click(function(){
$(".colors").slideToggle();
$("#heads").slideToggle();
});
$("#next2").click(function(){
$(".colors").slideToggle();
$(".fontcolors").slideToggle();
});
});
</script>
<!--<script type="text/javascript">
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location=this.getAttribute("href");
return false
}
}
self.scrollView.scrollEnabled = false;
- (void)killScroll
{
CGPoint offset = scrollView.contentOffset;
[scrollView setContentOffset:offset animated:NO];
}
- (void)killScroll
{
CGPoint offset = scrollView.contentOffset;
offset.x -= 1.0;
offset.y -= 1.0;
[scrollView setContentOffset:offset animated:NO];
offset.x += 1.0;
offset.y += 1.0;
[scrollView setContentOffset:offset animated:NO];
}
document.ontouchstart = function(e){
e.preventDefault();
}
</script>-->
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('blah').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<title>Create</title>
<style type="text/css">
.remote {
font-family: vevey;
color: black;
text-align: center;
font-size: 50px;
}
#imgInp::-webkit-file-upload-button {
visibility: hidden;
}
#custom {
padding: 5px;
width: 400px;
/*border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
/*padding-top: 20px;
padding-bottom: 20px; */
visibility: visible;
margin-top: -527px;
background-color: white;
/*-webkit-filter: blur(20px);*/
border: 1px solid black;
border-radius: 2px;
}
body {
transition: all .5s ease;
-webkit-transition: all .5s ease;
}
a {
text-decoration: none;
color: white;
}
.colors {
margin-left: 60px;
margin-top: 0px;
}
.fontcolors {
margin-left: 60px;
}
.ncolors {
margin-left: 60px;
}
.pcolors {
margin-left: 60px;
}
#namo {
width: 38px;
}
.red {
height: 50px;
width: 50px;
background-color: #ff6a6a;
border-radius: 100%;
border: 1px solid black;
}
.blue {
height: 50px;
width: 50px;
background-color: #8ad3ff;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 208px;
}
.green {
height: 50px;
width: 50px;
background-color: #8aff9e;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 156px;
}
.orange {
height: 50px;
width: 50px;
background-color: #ffbd6a;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 52px;
}
.yellow {
height: 50px;
width: 50px;
background-color: #fffb93;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 104px;
}
.purple {
background-color: #d58aff;
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
margin-left: 25px;
margin-top: -10px;
}
.black {
height: 50px;
width: 50px;
background-color: #181818;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 181px;
}
.white {
height: 50px;
width: 50px;
background-color: #EBEBEB;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 129px;
}
.pink {
height: 50px;
width: 50px;
background-color: #ffa4e9;
border-radius: 100%;
border: 1px solid black;
margin-top: -51px;
margin-left: 77px;
}
<!--#square {
height: 50px;
width: 50px;
background-color: black;
border-radius: 100%;
border: 1px solid white;
}
#circle {
height: 50px;
width: 50px;
background-color: black;
border-radius: 100%;
border: 1px solid white;
}-->
.paragr {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: paragraph;
font-size: 50px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.lol {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: lol;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.fon {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: font;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.boringthin {
height: 50px;
width: 50px;
border-radius: 100%;
border: 1px solid black;
font-family: boringthin;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.chunky {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: chunky;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
margin-left: 25px;
margin-top: -10px;
}
.fancy {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: fancy;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.handx {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: handx;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
#cash {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: handx;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.vevey {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: vevey;
font-size: 40px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.plus {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: vevey;
font-size: 80px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
.minus {
border-radius: 100%;
height: 50px;
width: 50px;
border: 1px solid black;
font-family: vevey;
font-size: 80px;
line-height: 50px;
text-align: center;
background-color: white;
color: black;
}
@font-face {
font-family: font;
src: url(tallfilm.ttf);
}
@font-face {
font-family: lol;
src: url(lol.otf);
}
@font-face {
font-family: boringthin;
src: url(boringthin.otf);
}
@font-face {
font-family: chunky;
src: url(chunky.otf);
}
@font-face {
font-family: fancy;
src: url(fancy.ttf);
}
@font-face {
font-family: handx;
src: url(hand.otf);
}
@font-face {
font-family: paragraph;
src: url(paragraph.otf);
}
@font-face {
font-family: vevey;
src: url(vevey.ttf);
}
@font-face {
font-family: remote;
src: url(remote.ttf);
}
#heading {
font-family: font, sans-serif;
text-align: center;
font-size: 100px;
transition: all .5s ease;
-webkit-transition: all .5s ease;
}
#body {
text-align: center;
font-family: lol, sans-serif;
font-size: 23px;
margin-top: -0px;
transition: color .5s ease;
-webkit-transition: color .5s ease;
width: 1000px;
}
#name {
text-align: center;
font-family: lol, sans-serif;
font-size: 17px;
margin-top: -120px;
transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.heading {
font-family: font, sans-serif;
background-color: white;
font-size: 25px;
border: 1px solid black;
}
.paragraph {
font-family: font, sans-serif;
background-color: white;
font-size: 25px;
border: 1px solid black;
}
.name {
font-family: font, sans-serif;
background-color: white;
font-size: 25px;
border: 1px solid black;
}
#heads {
margin-left: 62px;
}
/*#userinput {
width: 150px;
}
#userinput2 {
width: 150px;
}
#userinput3 {
width: 150px;
}
input:nth-child(1) {
width: 112px;
}
input:nth-child(3) {
width: 112px;
}
input:nth-child(5) {
width: 112px;
} */
.hide {
margin-left: 80px;
font-family: font, sans-serif;
background-color: white;
font-size: 25px;
color: black;
}
.hider {
color: black;
text-decoration: none;
}
.next {
font-family: font, sans-serif;
background-color: white;
font-size: 25px;
border: 1px solid black;
width: 50px;
text-align: center;
}
#imgtxt {
font-size: 40px;
font-family: vevey;
margin-top: -50px;
margin-left: 20px;
}
#blah {
height: 250px;
width: 250px;
font-size: 20px;
font-family: boringthin;
border: 2px solid;
border-radius: 5px;
}
#imgInp {
background-color: white;
font-family: boringthin;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
}
div {
transition: all 1s ease;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="iconic.png" />
<link rel="apple-touch-startup-image" href="/backgroundx.jpg">
<link rel="icon"
type="image/png"
href="iconic.png">
</head>
<body>
<center>
<p id='heading'>Head</p>
<p id='name'>Name</p>
<img id="blah" src="#" alt="Square Image" />
<br />
<p id='body'>Body</p>
</center>
<script type ="text/javascript">
function background(color) {
document.bgColor = color;
}
function fontp(fontx) {
document.getElementById("body").style.fontFamily = fontx;
}
function fonth(fontn) {
document.getElementById("heading").style.fontFamily = fontn;
}
function fontn(fontc) {
document.getElementById("name").style.fontFamily = fontc;
}
function paragraph(pcolor) {
document.getElementById("body").style.color = pcolor;
document.getElementById("blah").style.borderColor = pcolor;
}
function square(amt) {
document.getElementsByTagName("div").style.borderRadius = amt;
}
function circle(amt) {
document.getElementsByTagName("div").style.borderRadius = amt;
}
function namec(ncolor) {
document.getElementById("name").style.color = ncolor;
}
function fontcolor(fontcolor1) {
document.getElementById("heading").style.color = fontcolor1;
}
function appear() {
document.getElementById("custom").style.visibility = "visible";
}
function hide() {
document.getElementById("custom").style.visibility = "hidden";
}
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('heading').innerHTML = userInput;
}
function changeText3(){
var userInput = document.getElementById('userInput2').value;
document.getElementById('body').innerHTML = userInput;
}
function changeText4(){
var userInput = document.getElementById('userInput3').value;
document.getElementById('name').innerHTML = userInput;
}
</script>
<div id="custom">
<div class="colors">
<div class="remote">Background Colors</div>
<a href="#" onClick="javascript:background('#ff6a6a')"><div class="red"></div></a>
<a href="#" onClick="javascript:background('#ffbd6a')"><div class="orange"></div></a>
<a href="#" onClick="javascript:background('#fffb93')"><div class="yellow"></div></a>
<a href="#" onClick="javascript:background('#8aff9e')"><div class="green"></div></a>
<a href="#" onClick="javascript:background('#8ad3ff')"><div class="blue"></div></a>
<a href="#" onClick="javascript:background('#d58aff')"><div class="purple"></div></a>
<a href="#" onClick="javascript:background('#ffa4e9')"><div class="pink"></div></a>
<a href="#" onClick="javascript:background('#EBEBEB')"><div class="white"></div></a>
<a href="#" onClick="javascript:background('#333333')"><div class="black"></div></a>
<div id="next2" class="next">Next</div>
</div>
<div id="imggg">
<input type='file' id="imgInp" onchange="readURL(this);" /><p id="imgtxt">X</p>
</div>
<div class="fontcolors">
<div class="remote">Heading Colors</div>
<a href="#" onClick="javascript:fontcolor('#ff6a6a')"><div class="red"></div></a>
<a href="#" onClick="javascript:fontcolor('#ffbd6a')"><div class="orange"></div></a>
<a href="#" onClick="javascript:fontcolor('#fffb93')"><div class="yellow"></div></a>
<a href="#" onClick="javascript:fontcolor('#8aff9e')"><div class="green"></div></a>
<a href="#" onClick="javascript:fontcolor('#8ad3ff')"><div class="blue"></div></a>
<a href="#" onClick="javascript:fontcolor('#d58aff')"><div class="purple"></div></a>
<a href="#" onClick="javascript:fontcolor('#ffa4e9')"><div class="pink"></div></a>
<a href="#" onClick="javascript:fontcolor('#EBEBEB')"><div class="white"></div></a>
<a href="#" onClick="javascript:fontcolor('#333333')"><div class="black"></div></a>
<a href="#" onClick="javascript:fonth('chunky')"><div class="chunky">E</div></a>
<a href="#" onClick="javascript:fonth('lol')"><div class="lol">E</div></a>
<a href="#" onClick="javascript:fonth('boringthin')"><div class="boringthin">E</div></a>
<a href="#" onClick="javascript:fonth('handx')"><div class="handx">E</div></a>
<a href="#" onClick="javascript:fonth('font')"><div class="fon">E</div></a>
<a href="#" onClick="javascript:fonth('vevey')"><div class="vevey">E</div></a>
<a href="#" class="plushead"><div class="plus">+</div></a>
<a href="#" class="minushead"><div class="minus">-</div></a>
</div>
<div class="ncolors">
<div class="remote">Name Color</div>
<a href="#" onClick="javascript:namec('#ff6a6a')"><div class="red"></div></a>
<a href="#" onClick="javascript:namec('#ffbd6a')"><div class="orange"></div></a>
<a href="#" onClick="javascript:namec('#fffb93')"><div class="yellow"></div></a>
<a href="#" onClick="javascript:namec('#8aff9e')"><div class="green"></div></a>
<a href="#" onClick="javascript:namec('#8ad3ff')"><div class="blue"></div></a>
<a href="#" onClick="javascript:namec('#d58aff')"><div class="purple"></div></a>
<a href="#" onClick="javascript:namec('#ffa4e9')"><div class="pink"></div></a>
<a href="#" onClick="javascript:namec('#EBEBEB')"><div class="white"></div></a>
<a href="#" onClick="javascript:namec('#333333')"><div class="black"></div></a>
<a href="#" onClick="javascript:fontn('chunky')"><div class="chunky">E</div></a>
<a href="#" onClick="javascript:fontn('lol')"><div class="lol">E</div></a>
<a href="#" onClick="javascript:fontn('boringthin')"><div class="boringthin">E</div></a>
<a href="#" onClick="javascript:fontn('handx')"><div class="handx">E</div></a>
<a href="#" onClick="javascript:fontn('fancy')"><div class="fancy">E</div></a>
<a href="#" onClick="javascript:fontn('vevey')"><div class="vevey">E</div></a>
<a href="#" class="plusname"><div class="plus">+</div></a>
<a href="#" class="minusname"><div class="minus">-</div></a>
</div>
<div class="pcolors">
<div class="remote">Body</div>
<a href="#" onClick="javascript:paragraph('#ff6a6a')"><div class="red"></div></a>
<a href="#" onClick="javascript:paragraph('#ffbd6a')"><div class="orange"></div></a>
<a href="#" onClick="javascript:paragraph('#fffb93')"><div class="yellow"></div></a>
<a href="#" onClick="javascript:paragraph('#8aff9e')"><div class="green"></div></a>
<a href="#" onClick="javascript:paragraph('#8ad3ff')"><div class="blue"></div></a>
<a href="#" onClick="javascript:paragraph('#9450ff')"><div class="purple"></div></a>
<a href="#" onClick="javascript:paragraph('#ffa4e9')"><div class="pink"></div></a>
<a href="#" onClick="javascript:paragraph('#EBEBEB')"><div class="white"></div></a>
<a href="#" onClick="javascript:paragraph('#333333')"><div class="black"></div></a>
<a href="#" onClick="javascript:fontp('paragraph')"><div class="paragr">E</div></a>
<a href="#" onClick="javascript:fontp('lol')"><div class="lol">E</div></a>
<a href="#" onClick="javascript:fontp('boringthin')"><div class="boringthin">E</div></a>
<a href="#" onClick="javascript:fontp('handx')"><div class="handx">E</div></a>
<a href="#" onClick="javascript:fontp('fancy')"><div class="fancy">E</div></a>
<a href="#" onClick="javascript:fontp('vevey')"><div class="vevey">E</div></a>
<a href="#" class="plusbody"><div class="plus">+</div></a>
<a href="#" class="minusbody"><div class="minus">-</div></a>
<div class="hide"><a class="hider">Hide</a></div>
</div>
<div id="heads">
<div class="remote">Your Text</div>
<input type='text' id='userInput' value='' class="heading" />
<input type='button' onclick='changeText2()' value='Head' class="heading"/>
<br />
<input type='text' id='userInput3' value='' class="name" />
<input type='button' onclick='changeText4()' value='Name' class="name" id="namo"/>
<br />
<input type='text' id='userInput2' value='' class="paragraph" />
<input type='button' onclick='changeText3()' value='Body' class="paragraph"/>
<div id="next1" class="next">Next</div>
</div>
</div>
<!--<script>
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
window.onresize = function() {
$(document.body).width(window.innerWidth).height(window.innerHeight);
}
$(function() {
window.onresize();
});
</script>-->
</body>
</html>
这很邋and而且都错了，但是我太累了，内心已经死了，我需要一个人，我会尽可能多地付钱给你，无论你在这里使用什么货币
答案 0 :(得分：0)
右键单击并检查圆圈上的元素，您将看到问题。具有onclick属性的a-tags很小;它们不是圆圈div的大小，当您点击圆圈时，您实际上并没有点击它们。摆脱div周围的a-tags并将onclick属性移动到div本身。像这样：
<div class="red" onClick="javascript:background('#ff6a6a')"></div>
<div class="orange" onClick="javascript:background('#ffbd6a')"></div>
<div class="yellow" onClick="javascript:background('#fffb93')"></div>
<div class="green" onClick="javascript:background('#8aff9e')"></div>
<div class="blue" onClick="javascript:background('#8ad3ff')"></div>
<div class="purple" onClick="javascript:background('#d58aff')"></div>
<div class="pink" onClick="javascript:background('#ffa4e9')"></div>
<div class="white" onClick="javascript:background('#EBEBEB')"></div>
<div class="black" onClick="javascript:background('#333333')"></div>
为了避免像这样对颜色值进行硬编码，您可以将每个onclicks中的每一个更改为“background（this.className）”，因为所有的类名都是内置的html颜色。