`
worfchina
  • 浏览: 3955 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

js相关效果代码

阅读更多
分享js代码
<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=&amp;style=3&amp;fs=4&amp;textcolor=#fff&amp;bgcolor=#9C3&amp;text=分享到"></script>
                                
<!-- ShareTo Button BEGIN -->
<a class="shareto_button" href="http://shareto.com.cn/share.html"><img src="http://s.shareto.com.cn/btn/lg-share-cn.gif" width="125" height="21" alt="分享道" style="border:0"/></a>
<script type="text/javascript" src="http://s.shareto.com.cn/js/shareto_button.js" charset="utf-8"></script>
<!-- ShareTo Button END -->

<html><head><title>document.selection.createRange例子</title></head><body>  
 
<div>请选中这里的部分文字。</div><div><input type="button" value="加粗" onclick="javascript :Bold();" /></div>  
 
<script  language="javascript">  
 
function Bold(){  
 
var bo = document.selection.createRange();  
 
bo.execCommand("Bold");  
 
}</script>  
 
</body> 
</html>

document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。  
 
配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。  
 
实例一:  
 
<textarea cols=50 rows=15>  
哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步,我们才能赚大钱!</textarea>  
<input type=button value=选择字后点击我看看 onclick=alert(document.selection.createRange().text)>  
</form>  
 
实例二:  
 
<body>  
<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框,对话框的信息就是你选中的文字  
哪位老大能解决的呀?请多多帮忙!!!谢谢  
</textarea>  
<input type="button" value="showSelection" onclick="alert(document.selection.createRange().text)">  
<input type="button" value="showclear" onclick="alert(document.selection.clear().text)">  
<input type="button" value="showtype" onclick="alert(document.selection.type)">  
<textarea name="textfield" cols="50" rows="6" onselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框,对话框的信息就是你选中的文字  
哪位老大能解决的呀?请多多帮忙!!!谢谢  
</textarea>  
 
</body>  
 
实例三:选中Input中的文本  
 
<SCRIPT LANGUAGE="JavaScript">  
<!--  
function test2()  
{  
var t=document.getElementById("test")  
var o=t.createTextRange()  
alert(o.text)  
o.moveStart("character",2)  
alert(o.text)  
o.select()  
}  
//-->  
</SCRIPT>  
<input type='text' id='test' name='test'><input type=button onclick='test2()' value='test' name='test3'>  
对textarea中的内容,进行选中后,加效果  
<script language="JavaScript">  
<!--  
function bold(){  
Qr=document.selection.createRange().text;  
if(!Qr || document.selection.createRange().parentElement().name!='description')  
{  
txt=prompt('Text to be made BOLD.','');  
if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';  
}  
else{  
document.selection.createRange().text=''+document.selection.createRange().text+'';  
document.selection.empty();  
}  
}  
//-->  
</script>  
<input type="button" value="加粗" onclick="bold();" />  
<textarea name="description" style="width: 436px; height: 296px">选中我,点击加粗</textarea>  
实例四:javascript捕获到选中的网页中的纯文本内容  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>鼠标取词</title>  
<script>  
function getSel()  
{  
var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))  
document.forms[0].selectedtext.value = t;  
}  
</script></head>  
<body onmouseup="getSel()">  
<form>  
<textarea name="selectedtext" rows="5" cols="50"></textarea>  
</form>  
以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)  
如果想获得包含html的内容,将document.selection.createRange().text改成document.selection.createRange().htmlText  
</body>  
</html>  
分享到:
评论

相关推荐

    JavaScript大全 常用JS效果代码

    这个压缩包文件“JavaScript大全 常用JS效果代码”显然包含了一系列实用的JavaScript代码片段,旨在帮助开发者快速实现常见的网页特效和功能。 1. **JS特效**:JavaScript能够创造出丰富的用户体验,如滑动门、轮播...

    鼠标放上去触发一个javascript提示框效果代码

    鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...

    js代码 多种js效果 代码

    本压缩包包含了多种JS效果的代码实例,非常适合开发者研究和学习。 一、基础概念 1. DOM操作:JS通过Document Object Model(DOM)与HTML页面进行交互,可以修改、添加或删除页面元素。如`getElementById`、`...

    JavaScript JS手风琴图片展示效果代码

    JavaScript JS手风琴图片展示效果代码 JavaScript手风琴图片展示效果代码,确实效果不错的东西,鼠标放到风琴的每一个键位上,会滑出清淅大图,整体效果动感十足,这种排列方式称之为横向手风琴,还有竖向的,特效用...

    javascript 1470个效果代码 值得你收藏

    这个“javascript 1470个效果代码 值得你收藏”集合,显然是一份包含了大量JavaScript实用代码片段的资源库,对于开发者来说,这是一份非常宝贵的参考资料。 首先,我们要理解JavaScript的基础知识。JavaScript由...

    60个WEB网页实用js效果代码集合

    【标题】"60个WEB网页实用js效果代码集合"所涵盖的知识点主要涉及Web开发中的JavaScript编程,以及与网页动态效果和交互性设计相关的技术。JavaScript是一种在客户端浏览器上运行的脚本语言,它是构建现代网页应用的...

    网站页面JS代码及效果javascript

    在这个"网站页面JS代码及效果"的资源包中,包含了各种JavaScript特效的示例代码,旨在帮助开发者理解和掌握JavaScript在网页设计中的实际应用。 1. **基础语法与数据类型**:JavaScript的基础包括变量声明(var, ...

    纯js +css 仿flash 图片切换效果代码

    纯js +css 仿flash 图片切换效果代码

    数字定时翻牌效果js代码

    "数字定时翻牌效果js代码"就是一种实现这种动态效果的技术,它通常用于显示实时更新的数据,比如即时比分、倒计时或者计时器等场景。在这个特定的案例中,我们可以详细探讨以下几个关键知识点: 1. **JavaScript ...

    1号店完整代码_js代码_一号店代码_京东1号店_

    【标题】"1号店完整代码_js代码_一号店代码_京东1号店"涉及到的是一个电子商务网站的前端实现,特别关注的是JavaScript(JS)在其中的应用,这是一门广泛用于网页动态效果和交互功能的编程语言。1号店是中国知名的...

    基于three.js + canvas实现爱心代码+播放器效果.zip

    基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...

    基于Threejs的火焰烟雾动画效果代码

    `js`文件夹可能包含了主要的JavaScript代码,其中可能包括创建场景、相机、光源、粒子系统以及纹理加载的部分。代码可能会使用`THREE.ParticleSystem`或`THREE.Points`来创建火焰和烟雾粒子,并通过`THREE....

    超NB的js图片预览效果代码

    超NB的js图片预览效果代码超NB的js图片预览效果代码

    js好看效果源代码大全

    在"javascript效果源码大全 v1.0.chm"这个文件中,用户可以找到详细的代码示例和可能的注释,帮助理解和实现这些效果。CHM是Microsoft的 Compiled HTML Help 文件,通常包含了组织良好的文档和代码示例,方便用户...

    javascript经典效果示例

    68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示(纯CSS) 71:___鼠标移上图片,变换出大图片 72:___鼠标经过图片时显示半透明文字,边框变色 73:___鼠标经过...

    js实现爱心喷射效果代码,浪漫表白的美好记录,前端必需!

    js实现爱心喷射效果代码,浪漫表白的美好记录,前端必需! js实现爱心喷射效果代码,浪漫表白的美好记录,前端必需! js实现爱心喷射效果代码,浪漫表白的美好记录,前端必需! js实现爱心喷射效果代码,浪漫表白的...

    五屏切换JS幻灯效果代码

    【五屏切换JS幻灯效果代码】是一种常见的网页动态展示技术,主要用于网站的首页或者其他重要位置,以吸引用户的注意力并展示重要信息。这种效果通过JavaScript编程实现,可以将多张图片或者内容在五个屏幕上进行循环...

    JS超炫切换效果焦点图代码

    "JS超炫切换效果焦点图代码"指的是利用JavaScript实现的一种动态、吸引用户注意力的图片轮播功能,常用于网站的首页或者产品展示区域。这种焦点图效果可以使用户体验更加丰富,提升网站的互动性和视觉吸引力。 焦点...

    js作品效果代码集.rar

    【标题】"js作品效果代码集.rar"是一个包含JavaScript编程示例和效果的压缩文件,主要涉及JavaScript(js)和JavaScript的语法与应用,也就是JavaScript技术。JavaScript是一种广泛用于网页和网络应用的脚本语言,它...

    js2c#-js转换c#代码

    对于"JS规范示例.js"这样的文件,它可能是用来展示JS代码结构和功能的样本,以便于测试和演示JS2C#工具的效果。转换后,开发者可以查看生成的C#代码,了解转换过程中的语义保持程度以及可能存在的问题。 在实际项目...

Global site tag (gtag.js) - Google Analytics