案例字体选择

最新推荐文章于 2024-09-10 10:47:16 发布

qq_38068491

最新推荐文章于 2024-09-10 10:47:16 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83038081

版权


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义字体形状</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
		}
		#wrap {
			background: url(img/bg.jpg) 0 0 no-repeat;
			width: 556px;
			height: 535px;
			margin: 10px auto;
			position: relative;
			display: block;
		}
		#showbox {
			position: absolute;
			top: 100px;
			left: 10px;
			height: 270px;
			width: 385px;
			display: block;
			font-size: 16px;
			overflow: auto;
		}
		textarea {
			border: none;
			position: absolute;
			width: 385px;
			height: 75px;
			left: 10px;
			top: 415px;
			font-size: 16px;
		}
		select {
			position: absolute;
			top: 385px; 
			left: 8px;
		}
		input {
			position: absolute;
			top: 509px;
			left: 323px;
			width: 80px;
			cursor: pointer;
		}
		#showbox div {
			width: 20px;
			display: inline-block;
			font-size: 16px;
			margin: 2px 0;
		}
		div img {
			width: 16px;
			height: 16px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="showbox">
			<!--
				flwejlfjlewj
				
			表白字体	
			吊死扶伤分为非-->
			<!--<div><img src="img/heart.gif"><span></span></div>
			<div><img src="img/heart.gif"><span></span></div>
			<div><img src="img/heart.gif"><span></span></div>
			<div><img src="img/heart.gif"><span></span></div>
			<div><img src="img/heart.gif"><span></span></div>-->
		</div>
		<select name="fontStyle" id="fontStyle">
			<option value="balloon">气球字体</option>
			<option value="heart">表白字体</option>
			<option value="knife">砍刀字体</option>
			<option value="jiong">囧人字体</option>
			<option value="shuai">衰人字体</option>
			<option value="default" selected>默认字体</option>
		</select>
		<textarea id="cont"></textarea>
		<input type="button" value="发送" id="send">
	</div>
</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
	//1.在输入框输入想说的话
	//2.选择想要的字体方式
	//3.点击发送
	//4.在显示区显示内容
	
	//逻辑：点击发送，得到输入的文字内容，根据字体方式，显示内容
	//点击发送
	var showbox=document.getElementById("showbox");
	var fontStyle=document.getElementById("fontStyle");
	var cont=document.getElementById("cont");
	var send=document.getElementById("send");
	
	send.onclick=function(){
		var cValue=cont.value;
		var fValue=fontStyle.value;
		var str="";
		for(var i=0;i<cValue.length;i++){
	        str+="<div><img src='img/"+fValue+".gif'><span>"+cValue[i]+"</span></div>"
		}
		showbox.innerHTML+=str+"<br>";
	}
</script>