javaScript实用小技巧

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量583 收藏
点赞数
文章标签： javascript scroll function html input cmd
    
1．下部状态览显示字符
有些主页,当你把鼠标指向某个连接后,在状态栏会出现该连接的说明,是不是很方便呢?其实,只要在连接语句中加入以下的紫色 内容,就可以实现了!中间的" 中国网虫俱乐部"可以随便改呦!
< html >
< head >
< meta HTTP-EQUIV=" Content-Type " CONTENT=" text/html;CHARSET=gb2312 " >
</head>
< HREF="http://www.spring.fj.cn/club" OnmouseOver="window.status='中国网虫俱乐部';return true;" OnMouseOut="window.status=' ';"></a>
</BODY>
</HTML>
2．添加windows按钮
懒得自己作漂漂按钮的人，可以考虑用这种按 钮，虽然不漂亮，但还颇有质感！请在 <>之後 <>之前加入这一段：
 
<SCRIPT LANGUAGE="JavaScript">
function Hello() {
window.open('pagename.htm','','width=640,height=220,
scrollbars=yes,resizable=yes')
}
</SCRIPT>
上面蓝色和紫色的部份可以自己命名,之後,看你将按钮要放在哪里,就在那里加入下面这些语句.(蓝色部份的名称要一样喔!)
 
<FORM>
<INPUT TYPE="BUTTON" VALUE="试试看" onClick=" Hello()" >
</FORM>
3．自动跳出浮动网页
有没有看到一个小小的浮动视窗啊？ 看完了记得要关闭啊 !对了，只要一进站，或连结到某网页，它就会自动出现，全自动的喔！至於要如何使用，就看个人创意了！有人会当作放话区、有人会摆上工具列、有人会拿来它欢迎网友的光临....您呢？
 
<HTML>
<HEAD>
<TITLE>说明视窗</TITLE>
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = ' 说明视窗的内容 .htm ';
}
// -->
</script>
</HEAD>
那个 popup.location.href = ' 说明视窗的内容 .htm';请修改成您自己的HTML档。
至於说明视窗的大小，请自行调整这里：width=200,height=170，爱多大就多大....
 
4．字符动态显示
不知道您有没有注意到，在有些首页的最下方，常常会看见一排字咕噜咕噜的冒出来（低头看看本页的状态列吧！），知道那是怎麽做的吗？把下列这东西加进去就可以罗！（先用滑鼠将下面标记起来，按左键复制到首页中即可！）紫色的部份可自己填进去，记得要把这些语句加在 <title>######</title>之後！
<SCRIPT LANGUAGE="JavaScript">
<!--
function scroll(seed)
{
var m1 = " 欢迎光临"
var m2 = " 中国网虫俱乐部 "
var msg=m1+m2;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
var cmd="scroll(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scroll(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
} else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scroll(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scroll(100)",7);
}
}
}
timerONE=window.setTimeout('scroll(100)',50);
//-->
</SCRIPT>
 
5．状态列跑马灯显示
这是一个很有趣的状态列跑马灯，有别於一般的跑马灯喔！低头看看状态列吧！
将下列 紫色的地方，加进您的网页即可！
<HTML>

<HEAD>
<TITLE>跑马灯</TITLE>

</HEAD>
<SCRIPT Language="JavaScript">

var msg=" 欢迎光临中国网虫俱乐部 ";
var interval = 100;
seq = 0;

function Scroll() {

len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) { seq = 0 };
window.setTimeout("Scroll();", interval );
}

</SCRIPT>
<BODY OnLoad="Scroll();">

</BODY>

</HTML>
 
6．字符跑马灯显示
这是最简单的一种跑马灯，内容只有一点点。很不错喔！
将下列紫色的地方，加进您的网页即可！
<HTML>

<HEAD>
<TITLE>跑马灯</TITLE>

</HEAD>

<SCRIPT Language="JavaScript">

var msg=" 欢迎光临中国网虫俱乐部 ";
var interval = 100;
var space10="";
var seq=0;

function Scroll() {
document.tmForm.tmText.value = msg.substring(seq, msg.length) + space10 + msg.substring(0, msg.length);
seq++;seq++;
if ( seq > msg.length ) { seq = 0 };
window.setTimeout("Scroll();", interval );
}

</SCRIPT>
<BODY OnLoad="Scroll();" >

<CENTER><FORM Name=tmForm>
<INPUT Type=Text Name=tmText Size=45>
</FORM></CENTER>

</TD></TR>
</TABLE>

</CENTER>
</BODY>

</HTML>
 
7．字符跑马灯显示2
与众不同的东西总是能吸引大众的目光...，走马灯也是一样,换换口味，来点别的！底下这个走马灯就很有趣：
将下列 紫色的地方，加进您的网页即可！
<HTML>

<HEAD>

<TITLE>跑马灯</TITLE>

<SCRIPT Language="JavaScript">

var msg=" 欢迎光临中国网虫俱乐部 ";
var interval = 100;
seq = 0;

function Scroll() {
document.tmForm.tmText.value = msg.substring(0, seq+1);
seq++;
if ( seq >= msg.length ) { seq = 0 };
window.setTimeout("Scroll();", interval );
}

</SCRIPT>
<BODY OnLoad="Scroll();" >

<FORM Name=tmForm> <INPUT Type=Text Name=tmText Size=45> </FORM>
</BODY>

</HTML>
 
8．更花哨的跑马灯
好还要更好！花俏还要更花俏！这个状态列的走马灯可以说是花到极点了...。（请低头看看状态列！）快COPY回去吧！
将下列紫色的地方，加进您的网页即可！
<HTML>

<HEAD>
<TITLE>跑马灯</TITLE>

</HEAD>
<HTML>

<SCRIPT Language="JavaScript">

var msg=" 欢迎光临中国网虫俱乐部 ";
var interval = 100;


var spacelen = 120;
var space10=" ";
var seq=0;

function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
seq = spacelen;
window.setTimeout("Scroll2();", interval );
}
else
window.setTimeout("Scroll();", interval );
}

function Scroll2() {
var out="";

for (i=1; i<=spacelen/space10.length; i++) out += space10;
out = out + msg;
len=out.length;
window.status=out.substring(seq, len);
seq++;
if ( seq >= len ) { seq = 0; };
window.setTimeout("Scroll2();", interval );
}

</SCRIPT>
<BODY OnLoad="Scroll();" >

</BODY>

</HTML>
9．动态随机显示文字
不知您注意本网页的"小小留言"了吗?每次进去的时候,里面有个黄色的带子,里面的文字会经常改变,是不是很有趣?其实很简单,只要下面的语句即可.

<SCRIPT Language="JavaScript">
tips = new Array( 6);
tips[0] = "这是个随机的提示，再按一次Reload看看！";
tips[1] = "每次按Reload都会有不一样的结果出现喔！";
tips[2] = "随机提示是不是很简单呢？";
tips[3] = "赶快把这个随机提示的原始档COPY回去吧！";
tips[4] = "这是个很实用的东西喔！发挥您的创意吧！";
tips[5] = "赶快把他安装到您的网页里去吧！";
index = Math.floor(Math.random() * tips.length);
document.write("<CENTER>" + tips[index] + "</CENTER><P>");
</SCRIPT>

其中 Array(6)要注意，看您设了几个tips，您就要将之做适当的修改，本例共设了6个tips，故为Array(6)。
 
10．及时刷新的时钟
会觉得连结的时钟、日期很慢吗？是不是开始觉得ＪＡＶＡ的时钟很麻烦呢？您又有一个新选择了！就是用Java Script 写出来的线上时钟及日期显示，不但快，而且详细立即！连状态列都有时钟，很不错唷！ 窗体底部
 
 
  1. 将以下的控制码先复制起来。（用滑鼠将底下的一堆黑色部份的程式码，标记起来，按滑鼠右键选择【复制】就行啦！）
  2. 然後在网页中的 </HEAD> 之後将刚刚复制的东西贴上就大功告成了！（按滑鼠右键选择【贴上】就行啦！）
  3. 最後，更改原始码中的内容就可以了！（就是紫红色的地方，改成您想要的内容即可！）

<HTML>
<HEAD>
<TITLE> 简易时钟 </TITLE>
</HEAD>
<script language="JavaScript">
<!--
var timerID = null
var timerRunning = false
function stopclock(){
// cannot directly test timerID on DEC OSF/1 in beta 4.
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startclock(){
// Make sure the clock is stopped
stopclock()
showtime()
}
function showtime(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue
timerID = setTimeout("showtime()",1000)
timerRunning = true
}
//-->
</script>
<BODY οnlοad="startclock()" >
<form name="clock" οnsubmit="0">
<input type="text" name="face" size="14" value>
</form>
</BODY>
</HTML>
 
11．网页停留时间设置
进站时间、小时钟都不稀奇，能够测出您在此网页停留多久的时间才稀奇！不过，会不会因为使用者看了这个时钟後，发现自己停留的时间太久了，而...。这...就看您如何使用罗！
 
  1. 将以下的控制码先复制起来。（用滑鼠将底下的一堆黑色部份的程式码，标记起来，按滑鼠右键选择【复制】就行啦！）
  2. 然後在网页中的 </HEAD> 之後将刚刚复制的东西贴上就大功告成了！（按滑鼠右键选择【贴上】就行啦！）
  3. 最後，更改原始码中的内容就可以了！（就是紫红色的地方，改成您想要的内容即可！）

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
<TITLE>停留时间</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));
var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;
function init ()
{
if(ap_name=="Netscape" && ap_ver>=3.0)
dl_ok=true;
return true;
}
function get_time_spent ()
{
var time_now = new Date();
return((time_now.getTime() - clock_start)/1000);
}
function show_secs () // show the time user spent on the side
{
var i_total_secs = Math.round(get_time_spent());
var i_secs_spent = i_total_secs % 60;
var i_mins_spent = Math.round((i_total_secs-30)/60);
var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);
var s_mins_spent = "" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);
document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;
window.setTimeout('show_secs()',1000);
}
// -->
</SCRIPT>
<BODY onLoad="init(); window.setTimeout('show_secs()',1);" >
<form name="fm0" onSubmit="0">
<font size="-1"><I><FONT COLOR="#888888"> 停留时间:</FONT></I></font><br>
<INPUT type="text" name="time_spent" size=7 onFocus="this.blur()">
</form>
</BODY>
</HTML>
 
 
wisdosoft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript 实用小技巧
10-29
都是一些非常不错的js 小技巧,学习js的朋友一定要看下，有很多不错的代码。
JavaScript实用小技巧
pengjunlee的博客
11-11 5万+
JS打开窗口的两种方式 方式一： 使用超链接 &lt;a href="https://www.csdn.net/" title="CSDN"&gt;CSDN&lt;/a&gt; 等效于js代码 window.location.href="https://www.csdn.net/";     //在当前窗口中打开网址 方式二： 使用超链接 &lt;a href="https://www.
javascript 小技巧补充
joey_hao的博客
06-30 195
javascript的一些使用小技巧
实用Javascript调试技巧分享
kiku
08-04 250
实用Javascript调试技巧 见过太多同学调试Javascript只会用简单的 console.log甚至 alert，看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码，却忽略了如何优雅而高效地调试代码，不得不说是有点“偏科”了。下面我就分享一些实用且聪明的调试技巧，希望能让大家调试自己代码的时候更加从容自信。 1. 不要使用 alert 首先， alert只能打印出字符串，如果打印的...
实用的JavaScript小技巧
蓝易云
01-22 309
这些JavaScript小技巧可以帮助你更加高效地编写代码，提高代码质量和可读性。使用async/await和Promise链来处理异步操作，保持代码清晰易读。使用map、filter、reduce等数组方法可以高效地操作数组元素。使用Set或reduce方法可以快速去除数组中的重复项。使用slice方法可以截取数组的一部分，不会改变原数组。使用逻辑运算符的短路求值特性可以进行简洁的条件判断。使用模板字符串可以更清晰地拼接字符串和变量。通过解构赋值可以轻松从对象或数组中提取值。
JavaScript 练手小技巧：键盘事件
九天翔龙的技术博客
01-28 3121
键盘事件应该是鼠标事件之外，使用频率最高的 JS 事件了吧？一般用于或者。键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件。
JavaScript逻辑运算符的小技巧
klaus的博客
04-18 288
(1)逻辑运算符!!用于快速转化为布尔值 (2)逻辑运算符&&用于进行判断 例如 eq1&&eq2表示eq1为真则eq2 (3)||用于赋初值
javascript实用小技巧—实现分栏显示
程雅丽的博客
10-13 4134
记得给师哥师姐测试考试系统的时候，看到他们的考试页面可以实现隐藏左边的考生信息部分，当时觉得好高大上，好人性化。现在学了javascript，我也能实现这个功能了，下面来显摆一下。 1.页面设计： (1).html代码： js分栏 .alignment{ text-align: center; } //...... 栏目一
前端JavaScript小技巧「建议收藏」
热门推荐
江拥羡橙的博客
09-29 5万+
在JavaScript世界里，有些操作会让你无法理解，但是却无比优雅 有时候读取变量属性时，他可能不是Ojbect。这个这个你就要判断这个变量是否为对象，如果是在如引用 var obj; if(obj instanceof Object){ console.log(obj.a); }else{ console.log('对象不存在'); }ES6中有简便写法，可以帮我们简短代码，从而更加明确 var obj; console.log(obj?.a || '对象不存在'
JavaScript 前端编程使用小技巧
LittleUniverse
12-24 482
此文章只是简单的提纲，会进一步完善；关于对象的操作- 删除对象的某个属性： - `delete` 方法； - `undefined` 方法； 关于条件选择的操作- `if` - `switch` - `Object` - `Array` 关于数组的操作
几个一看就会的实用JavaScript优雅小技巧
快跑啊小卢的博客
04-10 5324
☀️ 前言 大家好我是小卢，在工作中我们经常可以通过一些小细节来增加代码可读性，让代码看起来更加优雅。 这次我就给大家分享一些一看就会的实用JavaScript优雅小技巧。 难度：🌟 推荐阅读时长:5min 😎 正片 减少if…else面条代码 一旦当我们写到超过两个if...else的函数的时候就该想想是否有更好的优化方法。 比如现在需要让我们根据名称计算出麦某劳的食品价格，你可能会这么做。 这样的写法会让函数体有很多的条件判断语句，而当我们想下次增加一个商品的时候就需要修改函数内的逻辑增加一
JavaScript实用代码小技巧
10-18
在这篇文章中给大家分享了关于JavaScript实用代码小技巧的相关内容，有兴趣的朋友们可以参考学习下。
JavaScript小技巧整理
10-23
主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下
JavaScript小技巧 2.5 则
10-28
在上一篇文章中的（伪）Lambda模块中使用了几个小技巧，现在我就把这几个小技巧介绍一下
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 328
注释很详细，直接上代码……
Babel 原理浅析
qq_39454432的博客
04-29 813
Babel 原理浅析
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 598
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 343
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
bpmn-js推荐几款常用的插件
飞云先生
04-30 147
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
postman使用小技巧
08-24
当然，我很乐意分享一些 Postman 使用的小技巧！以下是几个常用的技巧： 1. 环境变量：使用环境变量可以简化在不同环境中...这些是一些常见的 Postman 使用小技巧，希望对您有所帮助！如果您有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值