长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

JS代码实用代码实例

  • 时间:2016-10-27 16:56
  • 发布:长沙web培训
  • 来源:web教程

长沙HTML5培训的老师今天给大家讲,JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)

前段时间写前端,遇到一些模块非常有用,长沙HTML5培训的老师总结一下分享给大家

一.input框字数监听

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<input type="text" name="wxChoiceInfo.infoTitle" id="wxChoiceInfoInfoTitle" size="120" onkeyup="countNum(this)"/>

<div id="countNum" style="color: blue">还可输入<span id="num">140</span>个汉字</div>

<script src="static/js/jquery-1.12.4.js"></script>

<script>

function countNum(e){

var value=$(e).val();

var cArr = value.match(/([\u0391-\uffe5])/ig); //返回中文的字符

var um=Math.floor((420-value.length-2*(cArr == null ? 0 : cArr.length))/3);

$("#num").text(num);

if(num>=0){

$("#countNum").css({"color": "#FBBC05"});

}else{

$("#countNum").css({"color": "#EA4335"});

}

}

</script>

</body>

</html>

二.点输入框显示,点击页面其他地方隐藏功能

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:400px; height:300px; background:#CCC; display:none;}

</style>

<script>

window.onload=function ()

{

var oBtn=document.getElementById('btn1');

var oDiv=document.getElementById('div1');

oBtn.onclick=function (ev)

{

var oEvent=ev||event;

oDiv.style.display='block';

//alert('按钮被点击了');

oEvent.cancelBubble=true;

};

document.onclick=function ()

{

oDiv.style.display='none';

//alert('document被点击了');

};

};

</script>

</head>

<body>

<input id="btn1" type="button" value="显示" />

<div id="div1">

</div>

<div id="div2">

</div>

</body>

</html>

三.表情框

// QQ表情插件

(function($){ 

$.fn.qqFace = function(options){

var defaults = {

id : 'facebox',

path : 'face/',

assign : 'content',

tip : 'em_'

};

var option = $.extend(defaults, options);

var assign = $('#'+option.assign);

var id = option.id;

var path = option.path;

var tip = option.tip;

if(assign.length<=0){

alert('缺少表情赋值对象。');

return false;

}

$(this).click(function(e){

var strFace, labFace;

if($('#'+id).length<=0){

strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +

'<table border="0" cellspacing="0" cellpadding="0"><tr>';

for(var i=1; i<=75; i++){

labFace = '['+tip+i+']';

strFace += '<td><img src="'+path+i+'.gif" onclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';

if( i % 15 == 0 ) strFace += '</tr><tr>';

}

strFace += '</tr></table></div>';

}

$(this).parent().append(strFace);

var offset = $(this).position();

var top = offset.top + $(this).outerHeight();

$('#'+id).css('top',top);

$('#'+id).css('left',offset.left);

$('#'+id).show();

e.stopPropagation();

});

$(document).click(function(){

$('#'+id).hide();

$('#'+id).remove();

});

};

})(jQuery);

jQuery.extend({

unselectContents: function(){

if(window.getSelection)

window.getSelection().removeAllRanges();

else if(document.selection)

document.selection.empty();

}

});

jQuery.fn.extend({

selectContents: function(){

$(this).each(function(i){

var node = this;

var selection, range, doc, win;

if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){

range = doc.createRange();

range.selectNode(node);

if(i == 0){

selection.removeAllRanges();

}

selection.addRange(range);

} else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){

range.moveToElementText(node);

range.select();

}

});

},

setCaret: function(){

//if(!$.browser.msie) return;

var initSetCaret = function(){

var textObj = $(this).get(0);

//textObj.caretPos = document.selection.createRange().duplicate();

};

$(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret);

},

insertAtCaret: function(textFeildValue){

var textObj = $(this).get(0);

if(document.all && textObj.createTextRange && textObj.caretPos){

var caretPos=textObj.caretPos;

caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?

textFeildValue+'' : textFeildValue;

} else if(textObj.setSelectionRange){

var rangeStart=textObj.selectionStart;

var rangeEnd=textObj.selectionEnd;

var tempStr1=textObj.value.substring(0,rangeStart);

var tempStr2=textObj.value.substring(rangeEnd);

textObj.value=tempStr1+textFeildValue+tempStr2;

textObj.focus();

var len=textFeildValue.length;

textObj.setSelectionRange(rangeStart+len,rangeStart+len);

textObj.blur();

}else{

textObj.value+=textFeildValue;

}

}

});

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>qqFace</title>

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="css/reset.css">   

<style>

.comment{width:680px; margin:20px auto; position:relative; background:#fff; padding:20px 50px 50px; border:1px solid #DDD; border-radius:5px;}

.comment h3{height:28px; line-height:28px}

.com_form{width:100%; position:relative}

.input{width:99%; height:60px; border:1px solid #ccc}

.com_form p{height:28px; line-height:28px; position:relative; margin-top:10px;}

span.emotion{width:42px; height:20px;}

span.emotion:hover{background-position:2px -28px}

.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}

.qqFace table td{padding:0px;}

.qqFace table td img{cursor:pointer;border:1px #fff solid;}

.qqFace table td img:hover{border:1px #0066cc solid;}

#show{width:770px; margin:20px auto; background:#fff; padding:5px; border:1px solid #DDD; vertical-align:top;}

.sub_btn {

position:absolute; right:0px; top:0;

display: inline-block;

zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

*display: inline;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-align: center;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 1px 2px rgba(0,0,0,.2);

color: #e8f0de;

border: solid 1px #538312;

background: #64991e;

background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

background: -moz-linear-gradient(top, #7db72f, #4e7d0e);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

}

.sub_btn:hover {

background: #538018;

background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));

background: -moz-linear-gradient(top, #6b9d28, #436b0c);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');

}

</style>

</head>

<body>

<div id="show"></div>

<div class="comment">

<div class="com_form">

<textarea class="input" id="saytext" ></textarea>

<p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p>

</div>

</div>   

<script src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.qqFace.js"></script>

<script type="text/javascript">

$(function(){

$('.emotion').qqFace({

id : 'facebox',

assign:'saytext',

path:'arclist/'   //表情存放的路径

});

$(".sub_btn").click(function(){

var str = $("#saytext").val();

$("#show").html(replace_em(str));

});

});

//查看结果

function replace_em(str){

str = str.replace(/\</g,'&lt;');

str = str.replace(/\>/g,'&gt;');

str = str.replace(/\n/g,'<br/>');

str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');

return str;

}

</script>

</body>

</html>

四.文件本地预览上传

function handleFileSelect(evt) {

var files = evt.target.files;

// Loop through the FileList and render image files as thumbnails.

for (var i = 0, f; f = files[i]; i++) {

// Only process image files.

if (!f.type.match('image.*')) {

continue;

}

var reader = new FileReader();

// Closure to capture the file information.

reader.onload = (function(theFile) {

return function(e) {

// Render thumbnail.

var span = document.createElement('span');

span.innerHTML =

[

'<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',

e.target.result,

'" title="', escape(theFile.name),

'"/>'

].join('');

document.getElementById('list').insertBefore(span, null);

};

})(f);

// Read in the image file as a data URL.

reader.readAsDataURL(f);

}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />

<output id="list"></output>

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:二维数组的遍历和dom循环创建
下一篇:JS如何禁止别人查看网站源码

马上预约三天免费体验课

姓名:

电话:

CSS padding margin border属性详解

CSS元素类型

js中元素操作的内容和对比

Js对数组进行分组户数

选择城市和中心
贵州省

广西省

海南省