`

引人注目的输入框

阅读更多

闪烁的东西往往会吸引别人的注意。你可以用它来强调一些比较重要的内容。文本框也可以做到。

将如下javascripts代码加入紧靠</BODY>上面的位置。

<script language="JavaScript1.2">
<!--//
if (document.all&&document.all.flashit){

var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit

function changecolor(which){
if (flashelement[which].style.color=='')
flashelement[which].style.color="red"
else
flashelement[which].style.color=""
}


if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i<flashelement.length;i++){
var tempvariable='setInterval("changecolor('+i+')",'+'1000)'
eval(tempvariable)
}

}
//-->
</script>

然后在凡是要产生闪烁效果的地方加上:id="flashit" 即可。例如:

(1):
<textarea name="textfield" cols="40" rows="8" id="flashit">
(2):
<input type="text" name="textfield" value="文本框也可以的" size="40" id="flashit">
(3):
<input type="submit" name="Submit" value="Submit" id="flashit">

 

 

分享到:
评论
21 楼 02221021 2010-03-29  
帮你算了下。 按每半秒一次, 自增到超过int最大值 , 大概要2.850223767856284e + 300年。

应该够用了吧
20 楼 happysoul 2010-03-29  
汗。。。我不知道你怎么测的。。。
你测的代码是用我最开始想到的,不过你把var o = document.getElementById("f"); 也放到循环里面当然时间要长很多很多了。。。

对于你的代码,500ms可能不是一个很短的时间,如果换成了1ms的话你的自增总会有增到数字最大值的时候...?这个你能保证不发生么?

o.style.color=o.style.color=="red"?"black":"red";
这个方法算是完全利用代码本身的属性了

第一页的代码只是随手一写,完全没有考虑,所以我才有后面不断修改的精简版

最后,我的JS只算是初级自学,完全是兴趣使然,拿出来只是为了大家分享一下而已,毕竟我有自己的工作,又不是JS方面的,研究时间长了用处也不大...
LS的代码也拿走学习,会不会有溢出的危险那只能先当做问号处理了,不过如果非要用判断的话我依旧推崇用true false代替你的自增,代码的稳定和安全永远放到第一位!效率么... 我相信你把 getElements放到外面10000的数据量不会差太多的
19 楼 02221021 2010-03-29  
IE7下顺便给你个数据.先是你的.测试代码:
var d = new Date;

for (var i = 0; i < 10000; i++){
var o = document.getElementById("f");
o.s=(!o.s)?false:true;
o.style.color = o.s?"red":"";
o.s=(o.s)?false:true;
}

alert (new Date - d);

耗时 953ms

再是我的
var d = new Date
~function(){
var o = document.getElementById("f");
var i = 0;
var colors = ['red', ''];
for (var j = 0; j < 10000; j++){
o.style.color = colors[i++ % 2];

}
}()

alert (new Date - d);

耗时138ms.

哦, 当然, 我给页面多加了200个节点进去.

18 楼 02221021 2010-03-29  
happysoul 写道
不清楚你的 i 如果不限制一直循环下去会怎样... 如果大的程序里面随处都是这个后果是会很恐怖的,尤其在游戏里面,最后绝对会内存溢出,虽然这个过程是很缓慢的
减少不必要的变量使用,虽然js不像c那样需要考虑内存的使用

按照jquery的思路再发个再度精简的代码 多个标签的可以按你的代码考虑使用document.getElementsByName

<input type="text" name="xx" value="再再精简代码" id="f">
<script>
setInterval(function(){
var o = document.getElementById("f");
o.style.color=o.style.color!="red"?"red":"black";
},500);
</script>



瞎扯蛋. 没听过i能自增到内存溢出. 变量也只是局部变量, 清清楚楚的. 你那样每隔半秒取一次document.getElementById和每隔半秒多余读一次它的

style.color才是效率杀手. 我估计你这种代码风格, 别说大型游戏, 写个贪食蛇都能搞死机. 随意给节点添

加自定义属性更是瞎扯. 没听过html4 strict罢了, firefox里至少也要跑跑看吧? 而且o.s=(!o.s)?

false:true; 这个三目运算真是丑晕了. !!没用过吗?


17 楼 happysoul 2010-03-29  
不清楚你的 i 如果不限制一直循环下去会怎样... 如果大的程序里面随处都是这个后果是会很恐怖的,尤其在游戏里面,最后绝对会内存溢出,虽然这个过程是很缓慢的
减少不必要的变量使用,虽然js不像c那样需要考虑内存的使用

按照jquery的思路再发个再度精简的代码 多个标签的可以按你的代码考虑使用document.getElementsByName

<input type="text" name="xx" value="再再精简代码" id="f">
<script>
setInterval(function(){
var o = document.getElementById("f");
o.style.color=o.style.color!="red"?"red":"black";
},500);
</script>

16 楼 02221021 2010-03-29  
多个一起闪烁也不难.


<input type="text" name="textfield" value="赫赫" size="40" id="f">

<input type="text" name="textfield" value="哈哈" size="40" id="f">

<input type="text" name="textfield" value="呵呵" size="40" id="f">
<script>

~function(){
var os = document.getElementsByName('textfield');
var colors = ['red', ''];
for (var i = 0, c; c = os[i++];){
~function(c){
var j = 0;
setInterval(function(){
c.style.color = colors[j++ % 2];
},500);
}(c);
}
}()

</script>
15 楼 02221021 2010-03-29  
这个代码最少了吧.
<script>
var i = 0;
setInterval(function(){
document.getElementById("f").style.color = ['red', ''][i++ % 2];
},500);
</script>

不过还是这样写比较妥.

<input type="text" name="textfield" value="赫赫" size="40" id="f">
<script>
~function(){
var o = document.getElementById("f");
var i = 0;
var colors = ['red', ''];
setInterval(function(){
o.style.color = colors[i++ % 2];
},500);
}()

</script>
14 楼 ajonjun 2010-03-29  
,这不是阿亮吗?你也贴代码了啊,不简单.
13 楼 D-tune 2010-03-29  
happysoul 写道
zxsoft 写道
ls,楼主的代码可以一次让多个文本框闪烁的,你的可以吗?


我对jquery的使用仅限于他包装好了 class 选择器。
多个文本闪烁。。。 不过一个简单的闪烁还要第三方插件?
难道什么都要拿别人的么?
杀鸡焉用牛刀

<input type="text" value="好吧,用jquery" size="40" class="f">
<input type="text" value="好吧,用jquery" size="40" class="f">
<script src="jquery.js"></script>
<script>
setInterval(function(){$(".f").css("color",($(".f").css("color")!="red"?"red":"black"))},1000);
</script> 


ok 这样可以了吧,同样的效果,节省你一个插件

同意,很多tx貌似走上了为用而用的歧途了
轻量级的应用非得上大炮,何苦呢
12 楼 happysoul 2010-03-27  
zxsoft 写道
ls,楼主的代码可以一次让多个文本框闪烁的,你的可以吗?


我对jquery的使用仅限于他包装好了 class 选择器。
多个文本闪烁。。。 不过一个简单的闪烁还要第三方插件?
难道什么都要拿别人的么?
杀鸡焉用牛刀

<input type="text" value="好吧,用jquery" size="40" class="f">
<input type="text" value="好吧,用jquery" size="40" class="f">
<script src="jquery.js"></script>
<script>
setInterval(function(){$(".f").css("color",($(".f").css("color")!="red"?"red":"black"))},1000);
</script> 


ok 这样可以了吧,同样的效果,节省你一个插件
11 楼 zxsoft 2010-03-27  
ls,楼主的代码可以一次让多个文本框闪烁的,你的可以吗?

其實這個功能使用裝了 http://plugins.jquery.com/files/jquery.timers-1.2.js.txt 插件(官方 http://plugins.jquery.com/project/timers )的jQuery的話,一句話就可以了


<input type="text" class="flash"  value="aaa"/>
<input type="text" class="flash"  value="bbb"/>
<input type="text" class="flash"  value="ccc"/>

</body>
<script language="JavaScript">
<!--//
var list=$(".flash").everyTime(1000,function(){$(this).css('color',$(this).css('color')=='red'?'black':'red');});;
//-->
</script>
10 楼 happysoul 2010-03-27  
避免有人直接复制上面不看备注大喊有问题重新发个精简的

<input type="text" name="textfield" value="再精简代码" size="40" id="f">
<script>
setInterval(function(){
var o = document.getElementById("f");
o.s=(!o.s)?false:true;
o.style.color=o.s?"red":"";
o.s=(o.s)?false:true;
},500);
</script>
9 楼 lyndon.lin 2010-03-27  
真的比我的简单多啦,多谢共享。你这段代码在所有浏览器都测试过吗?
8 楼 happysoul 2010-03-27  
不懂楼主这么简单的东西非要弄得这么麻烦。。。
<input type="text" name="textfield" value="一个简单的ID有那么麻烦么?" size="40" id="flash">
<script>
function $(id){return document.getElementById(id)}
function c(){
	var o = $("flash");
	o.s=(!o.s)?false:true;
	//我编写的时候这里只有一个 o 不知道为什么提交的时候出现了两个 o ,javaeye 改 bug
	o.style.color=o.s?"red":"";
  	o.s=(o.s)?false:true;
}
var a = setInterval(c,500);
</script>

7 楼 xuanye 2010-03-27  
一个页面里面包含重复的ID是不合适的,用class要好多
6 楼 wing5jface 2010-03-27  
改成document.getElementById后chrome下测试通过,的确起到引人注目的输入框的效果
在线效果可看 hy2999.com   首页右上角搜索输入框
通过id直接操作style,应该也很正常吧,
注:那个站的整体网页不好看,不要批我
(刚玩PHP一天,直接改代码从原PHP连接2000至sqlserver 2005的,也包括配置php,不像java那样直接改class.forName就可以了,还要改很多mssql至sqlserver2005函数名及rewrite的配置,达到从PHP到HTML的静态效果)
5 楼 lyndon.lin 2010-03-27  
多谢两位的建议,回去我去试试。
4 楼 chw8219 2010-03-27  
我测试了下怎么一点效果都没有?
3 楼 moyue 2010-03-27  
document.all
这个是ie特有的,不是标准写法,在标准浏览器中是有问题的,可以写成document.getElementById.
另外楼上建议的对,id换成class更好,id不太合适
2 楼 hengheng 2010-03-26  
"然后在凡是要产生闪烁效果的地方加上:id="flash it" 即可。"

换成.凡是要产生闪烁效果的地方加上 class="blink" 比较好
很奇怪楼主怎么发出来的....f l a s h i t ..提交的时候提示我不允许包含 s h i t 这个词

相关推荐

    css按钮特效,输入框特效,按钮粒子效果

    总结,通过CSS3,我们可以轻松创建各种引人注目的按钮和输入框特效,提升用户体验。同时,虽然CSS3本身不支持复杂的粒子效果,但与JavaScript配合使用,可以创造出极具吸引力的交互式网页元素。不断探索和实践这些...

    可自定义样式的验证码输入框 iOS

    这在创建独特、引人注目的UI时尤其有用,因为它可以避免使用系统默认样式,提供更丰富的视觉效果。 其次,`WGDigitField`还支持自定义动画。在用户输入过程中,这些动画可以增强用户体验,例如,数字出现时的淡入...

    MooStarRating:一个基于一组无线电输入框创建非引人注目的星级评分控件的插件

    一个Mootools插件,可基于一组无线电输入框创建一个不引人注目的星级评分控件。 基于Diego Alto的jQuery Star Rating插件。 如何使用 JS示例: #JS // Basic usage, give only form name or ID var basicRating = ...

    背景自动变换炫酷后台登录html模板_背景 后台 登录 login.zip

    此模板的动态背景变化功能是通过CSS(Cascading Style Sheets)和JavaScript实现的,可能使用了定时器函数来定期更改背景图片或者视频,营造出引人注目的视觉效果。 在前端开发中,HTML负责页面的结构,CSS则负责...

    文本框标题创意深蓝背景银色微立体图表工作总结ppt模板.zip

    该PPT模板设计独特,以“文本框标题创意深蓝背景银色微立体图表工作总结ppt模板”为主题,旨在提供一种专业且引人注目的展示工具,适用于多种场合,如年终总结、新年计划、述职报告以及工作汇报等。深蓝色背景为整体...

    MahApps.Metro.Demo-v1.6.5-rc0001.zip

    《MahApps.Metro.Demo:一个全面展示.NET框架下UI设计的工具》 MahApps.Metro.Demo-v1.6.5-rc0001....无论是新手还是经验丰富的开发者,都能从中受益,将这些知识应用到自己的项目中,打造引人注目的桌面应用程序。

    华丽设计后台登录框psd模板下载_华丽 后台 登录框 登录 psd.zip

    总的来说,"华丽设计后台登录框psd模板下载"是一个极具价值的资源,能够帮助UI/UX设计师高效地创建出引人注目的后台登录界面。通过使用Adobe Photoshop的层和图层样式功能,设计师可以轻松定制模板,实现独特的设计...

    CSS3制作炫酷搜索框动画特效

    "CSS3制作炫酷搜索框动画特效"是一个关于如何利用CSS3的特性来创建引人注目的搜索框动画效果的主题。下面将详细探讨这个主题中的关键知识点。 首先,我们关注的是搜索框的基本结构。一个典型的搜索框通常由输入框...

    两套精美国外网页设计UI模版

    总的来说,"两套精美国外网页设计UI模版"提供了高质量的设计资源,帮助设计师和开发者提升工作效率,同时也为创建引人注目的网页提供了便利。通过深入理解和灵活运用这些模版,可以创造出既美观又实用的网页作品。

    css3自定义输入元素.zip

    总的来说,这个压缩包中的内容可能涵盖了如何利用CSS3、JavaScript和jQuery来创建引人注目的、交互性强的自定义输入元素。通过实践这些技巧,开发者不仅可以提升网站的视觉吸引力,还能优化用户体验,使表单填写变得...

    css超炫的发光搜索框

    在网页设计中,一个引人注目的搜索框可以极大地提升用户体验。本文将深入探讨如何使用CSS、HTML5和jQuery创建一款超炫的发光搜索框,同时也会提供相关的代码示例和实现步骤。 首先,让我们从HTML5的基础结构开始。...

    vue和three.js版炫酷的登录页

    在“vue版炫酷的登录页”中,Three.js 可用于创建引人注目的背景动画或者登录按钮的交互效果。例如,可以创建一个旋转的地球模型作为背景,当用户输入或点击按钮时,动画效果会发生变化,增强用户体验。 结合Vue.js...

    css3动效登录表单

    本篇文章将详细探讨如何使用CSS3来创建一个具有动效的登录表单,让网页更加生动和引人注目。 首先,我们需要理解CSS3的基础知识。CSS3是层叠样式表的第三个版本,它引入了许多新的特性和功能,包括但不限于选择器的...

    基于红色调的登陆界面

    但要注意,红色也可能引起紧张感,所以要确保使用适当饱和度和亮度的红色,使之既引人注目又不刺眼。 2. **布局设计**:登录界面应简洁明了,主要元素包括用户名/邮箱输入框、密码输入框、登录按钮,以及可能的注册...

    橙色背景CSS登陆页面模板是一款适合前台会员登陆框网页模板下载。.rar

    这款模板采用橙色为主色调,旨在营造出活力、友好且引人注目的视觉效果。 首先,我们来详细了解一下CSS(Cascading Style Sheets)在网页设计中的作用。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML...

    css3超炫登录界面.rar

    在现代Web开发中,用户体验是至关重要的因素之一,而登录界面作为用户与网站或应用的初次交互点,其设计必须引人注目且易于使用。本项目“css3超炫登录界面”通过充分利用CSS3的新特性,为用户打造了一个既美观又...

    web html精美登录注册页面 炫酷背景.rar

    ...在这组登录注册页面中,HTML文件将包含各种表单元素,如输入框(input)用于接收用户输入的用户名和密码,按钮...通过合理运用这些技术,你可以为你的网站创造出引人注目的登录注册界面,提升用户对网站的第一印象。

    在MFC中实现“高亮边框”的编辑控件

    在MFC(Microsoft Foundation Classes)框架中,开发人员...这个控件可以自由地集成到任何MFC应用中,为用户提供一种引人注目的输入方式。同时,这也展示了MFC中控件的自定义和绘图机制,这些都是MFC编程的基础知识。

    CSS3动态方块背景登录页面特效.zip

    【CSS3动态方块背景登录页面特效】 在前端开发中,CSS3是现代网页设计的重要组成部分,它提供了许多新特性,让...通过学习和理解这个示例,开发者可以提升自己的前端技能,为网站和应用添加更多引人注目的交互效果。

    jQuery表单占位符动画特效插件.zip

    jQuery表单占位符动画特效插件是一种用于增强网页表单用户体验的工具,它通过引入动态效果使得传统的静态占位符更加生动且引人注目。在网页设计中,占位符文本通常用来预示输入框应有的内容,但当用户开始输入时,...

Global site tag (gtag.js) - Google Analytics