html+css 实现 app四字 logo在线制作-优快云博客

本文链接：https://blog.youkuaiyun.com/YUJIANYUE/article/details/79223639
效果如下
http://test.51386.cn/ （访问看效果）
代码很简单
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>html+js+css 单文件免费实现 app logo在线制作</title>
<meta property="qc:admins" content="53d10d0243d5636b37bf1f8e81e341de" />
<meta name="baidu-site-verification" content="5ab73e4ddb9100b8f50fe09201da3927" />
<meta name="author" content="yujianyue, admin@ewuyi.net">
<meta name="copyright" content="www.12391.net">
<style type="text/css">
*{margin:0;padding:0;font-size:14px;line-height:150%;font-family:"microsoft yahei",SimHei;}
body,html{height:100%;text-align:center;overflow:hidden;background-color:#d0d0d0;}
.html{height:100%;width:100%;position:relative;overflow-y:auto;overflow-x:hidden;}
h1{font-size:22px;color:red;}
a{color:blue;text-decoration:none;}
a:hover {text-decoration:none;color:green;}
.r {text-align:right;width:30%;}
.l {text-align:left;color:green;}
.simg{width:50%;min-width:88px;max-width:188px;}
#divs{margin:0 auto;min-height:98%;position:relative;box-sizing:border-box;}
.divs{width:100%;max-width:600px;min-width:300px;background-color:#F0F0F0;}

.head{position:fixed;top:0px;margin:0 auto;width:100%;max-width:600px;min-width:300px;z-index:10;display:block;}
#head{line-height:180%;background-color:#0180CF;font-size:16px;line-height:40px;color:white;}
.back{position:absolute;right:9px;top:0px;line-height:40px;}
.d {border:1px white solid;line-height:150%;color:white;font-size:12px;padding:3px 5px;}
.d:hover {text-decoration:none;background-color:white;color:#0180CF; }

#main{margin:24px auto;padding:30px 1px;width:100%;}

.so_box{margin:24px auto;height:40px;line-height:40px;background-color:white;width:92%;border:1px #CACACA solid;margin-top:12px;position:relative}
.so_box .txts{margin:0px auto;height:31px;outline: none;line-height:31px;width:88%;padding-left:10px;border:0px;color:#333333;background-color:#FFFFFF;overflow:hidden;}
.so_box .buts{margin:0 auto;height:40px;line-height:40px;width:100%;padding-left:10px;border:0px;color:#333333;background-color:#0180CF;}
.so_box .more{position:absolute;position:absolute; top:0px; right:0px;}
.so_box .more img{ height:24px;}

.lgs{width:92%;margin:24px auto;padding:25px 0;background-color:white;}
.t{color:white;max-width:250px;font-size:100px;line-height:108px;text-align:center;}
.t{margin:25px 25px;padding:17px 0;font-weight:bold;border-radius:25px;}

.ta{background-color:#20a53a;}
.tb{background-color:teal;}
.tc{background-color:indigo;}
.td{background-color:blue;}
.te{background-color:red;}
.tf{background-color:purple;}
.tg{background-color:pink;}
.th{background-color:green;}

.so_but{margin:0px auto;text-align:center;border:0px;}
.so_bus{margin:8px 24px;text-align:left;border:0px;}
.so_but .buts{line-height:200%;padding:5px 25px;background:#0180CF;color:white;border:0px;}
#boto{margin:0 auto;width:100%;max-width:600px;min-width:300px;position:fixed;bottom:0px;display:block;}
.boto{background-color:#ADADAD;color:#000;text-shadow: 0 1px 1px #fff;line-height:180%;}
</style>

<script type="text/javascript">
var $=function(node){
return document.getElementById(node);
}
function $(objId){
return document.getElementById(objId);
}

function inst() {
if ($("name")!=null) $("name").value = $("tishi1").innerHTML;
}

function st(ids,Num){
reg = /^[\u4E00-\u9FA5]{4}$/;
if(!reg.test($(ids).value) || $(ids).value == $("tishi"+Num).innerHTML ){
$(ids).value = "";
}
}

function dolgs(Num) {
var queryString;
if(Num == 2 || Num == 0){
reg = /^[\u4E00-\u9FA5]{4}$/;
if(!reg.test($("name").value) || $("name").value == $("tishi1").innerHTML){
$("name").value = $("tishi1").innerHTML;
$("tips").innerHTML = "只能输入4个汉字！";
$('11').style.borderColor='red';
return false;
}else{
$("tips").innerHTML = "输入完成，点立即显示看效果。";
$('11').style.borderColor='green';
}
}
if(Num == "0"){
var names = $("name").value;
$("tp1").innerHTML = names ;
$("tp2").innerHTML = names ;
$("tp3").innerHTML = names ;
$("tp4").innerHTML = names ;
$("tp5").innerHTML = names ;
$("tp6").innerHTML = names ;
}
}
</script>
</head>
<body onLoad="inst();">
<div class="html">
<div class="divs" id="divs">
<div id="head" class="head">
APP简易图标在线免费生成
</div>
<div class="main" id="main">
<div class="so_box" id="11">
<input name="name" type="text" class="txts" id="name"  οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" placeholder="请输入4个汉字" οnfοcus="st('name',1)" onBlur="dolgs(2)" />
<div class="more so_but" id="clearkey">
<input type="submit" name="button" class="buts" id="sub" value="立即显示" οnclick="return dolgs(0);" />
</div>
</div>
<div class="so_bus" id="tishi">
<h1 id="tips"></h1>
<!--说明:输入汉字生成LOGO。<br-->
<!--你的其他说明在这里添加：开始-->
输入4个汉字后点 立即显示，就会显示多个不同颜色的APP LOGO图标。<br>
然后自己截图(250*250)后处理下尺寸为(128*128px,64*64PX,....)即可。<br>
html+js+css 单文件免费实现 app 4字 logo在线制作。<br>
可以asp,php,.net,jsp以及纯html静态网页空间均可使用。<br>
你也可以本地电脑浏览器打开使用哦。
<!--你的其他说明在这里添加：结束-->
</div>
<div id="tishi1" style="display:none;">请输入4个汉字</div>

<div class="lgs">
	<div class="ta t" id="tp1">万能查询</div>
	<div class="tb t" id="tp2">万能查询</div>
	<div class="tc t" id="tp3">万能查询</div>
	<div class="td t" id="tp4">万能查询</div>
	<div class="tf t" id="tp5">万能查询</div>
	<div class="th t" id="tp6">万能查询</div>
</div>

</div>
<div class="boto" id="boto">
&copy;  2018 <a href="http://yichaxin.com/" target="_blank">  易查薪</a>
</div>
</div>
</div>
</body>
</html>