html选择字休,选择字体.html

选择字体

html,body {

margin:0;

padding:0;

}

#wrap {

width:556px;

height:535px;

margin:20px auto;

background:url(img2/bg.jpg) no-repeat;

position:relative;

}

#showBox {

position:absolute;

left:10px;

top:100px;

width:380px;

height:278px;

}

#showBox div {

display:inline-block;

width:20px;

margin:2px 0;

padding:2px;

}

#showBox div img {

width:16px;

height:16px;

}

#fontStyle {

position:absolute;

left:1px;

top:381px;

width:150px;

height:24px;

}

#wrap textarea {

width:396px;

height:96px;

position:absolute;

left:0px;

bottom:30px;

border:0;

outline:none;

}

#wrap input {

width:82px;

height:22px;

position:absolute;

right:154px;

bottom:6px;

cursor:pointer;

}

window.onload = function () {

var oShowbox = document.getElementById("showBox");

var oSelect = document.getElementById("fontStyle");

var oTxt = document.getElementsByTagName("textarea")[0];

var oBtn = document.getElementsByTagName("input")[0];

var json = {

"qiqiu": "img2/balloon.png",

"honxin": "img2/heart.gif",

"jiong": "img2/jiong.gif",

"caidao": "img2/knife.gif",

"ganga": "img2/shuai.gif"

}

function chooseFont( whichFont, url , str ) {

if( oSelect.value == whichFont ) {

var arr = str.split("");

var str = "";

for(var i=0; i

str += "

"+ arr[i] +"

";

}

oShowbox.innerHTML += str + "
";

oTxt.value = "";

}

}

oBtn.onclick = function () {

var str = oTxt.value;

if( str == "") {

alert("请在输入框输入文字信息并发送");

}

if( oSelect.value == "default" ) {

oShowbox.innerHTML += str + "
";

oTxt.value = "";

}

for( attr in json ) {

chooseFont( attr, json[attr], str );

}

}

}

告白气球

红心

囧

菜刀

尴尬

默认字体

一键复制

编辑

Web IDE

原始数据

按行查看

历史