js代码
<script type="text/javascript"> var thisColor,fontSize; $(function(){ $('.fontSizeDiv a').on('click',function(){ fontSize = $(this).attr('data-size'); $('.fontSizeDiv a').removeClass('active'); $(this).addClass('active'); }); $('a.colorHint').on('click',function(){ $('.colorDiv').toggle(); }); $('.colorDivs a').on('click',function(){ thisColor = $(this).attr('data-color'); $('p.backColor').css({ 'background-color':'#'+thisColor }); $('p.colorText').text('#'+thisColor); }); }); var ds = document.getElementById('ds'); var dm = document.getElementById('dm'); var rr = document.getElementById('rr'); var st = document.getElementById('st'); var dw = document.getElementById('dw'); var num = 0; var pmh = ds.offsetHeight; var pmw = ds.offsetWidth; function mu() { var dd = document.createElement('div'); dd.setAttribute('class','ss'); dd.innerHTML = dm.value; dm.value=''; ds.appendChild(dd); dd.style.fontSize = fontSize; dd.style.color = '#'+thisColor; dd.style.left = '900px'; dd.style.top = Math.floor(Math.random()*(pmh-30))+'px'; var l = pmw-dd.offsetWidth; var tim = null; tim = setInterval(function(){ l--; if( l <= (0-dd.offsetWidth) ){ clearInterval(tim); ds.removeChild(dd); } dd.style.left = l+'px'; },20) } rr.onclick=function() { num++; if(num%2==0) { rr.style.background = '#006600'; ds.style.display='block'; num=0; } else { rr.style.background = '#dddddd'; ds.style.display='none'; } }; st.onclick=function() { if(dm.value!=''&&dm.value.length<=25) { mu(); } else { alert('输入不能超过25个字符!'); } }; document.onkeydown=function(even) { var event=even||window.event; if(event.keyCode==13) { if(dm.value!=''&&dm.value.length<=25) { mu(); } } }; dm.onclick=function() { dw.style.display='none'; setInterval(obj,10); }; function obj() { if(dm.value!=''&&dm.value.length<=25) { st.style.background='#ffa178'; } else { st.style.background='#00A2D6'; } } </script>