javascript实用小实例总结

最新推荐文章于 2023-12-02 22:06:52 发布

长虹剑

最新推荐文章于 2023-12-02 22:06:52 发布

阅读量969

点赞数

CC 4.0 BY-SA版权

分类专栏： html/js/jq 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/hongmaodaxia/article/details/24739671

html/js/jq 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了JavaScript中实现彩虹字效果、鼠标在canvas中的位置获取、自定义map函数、简单的页面切换效果、悬浮层效果、日期格式化以及页面加载后布局调整等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：如果有未知函数请到《javascript常用函数中》中寻找。

1.彩虹字效果

/*
用法示例： <h1 id="title"><script>rainbowText("八数码A*算法练习系统",20);</script></h1>
*/
function rainbowText(text,size){
	function createHexArray(n) {
		var arr=new Array(n);
		
		for (var i = 1; i <= n; i++)
		arr[i] = i - 1;
		
		arr[11] = "A";
		arr[12] = "B";
		arr[13] = "C";
		arr[14] = "D";
		arr[15] = "E";
		arr[16] = "F";
		return arr;
	}
	
	function convertToHex(x) {
		var hx = createHexArray(16);
		if (x < 17) x = 16;
		var high = x / 16;
		var s = high+"";
		s = s.substring(0, 2);
		high = parseInt(s, 10);
		var left = hx[high + 1];
		var low = x - high * 16;
		if (low < 1) low = 1;
		s = low + "";
		s = s.substring(0, 2);
		low = parseInt(s, 10);
		var right = hx[low + 1];
		var string = left + "" + right;
		return string;
	}
	
	text = text.substring(0, text.length);
	color_d1 = 255;
	mul = color_d1 / text.length;
	for(var i = 0; i < text.length; i++) {
		color_d1 = 255*Math.sin(i / (text.length / 3));
		color_h1 = convertToHex(color_d1);
		color_d2 = mul * i;
		color_h2 = convertToHex(color_d2);
		
		k = text.length;
		j = k - i;
		if (j < 0) j = 0;
		color_d3 = mul * j;
		color_h3 = convertToHex(color_d3);
		
		document.write("<FONT size="+size+" COLOR=\"#" + color_h3 + color_h1 + color_h2 + "\">" + text.substring(i, i + 1) + "</FONT>");
	}
}

2.获得鼠标在canvas中的位置（像素）

注：要保证canvas的height，width与style.height及style.width一致。也就是修改的时候同时修改。

函数mousePosition参看 js函数总结博客。

function canvasMouseClick(event){
    var canvas=document.getElementById("myCanvas");
    var bbox =canvas.getBoundingClientRect();
    var x=event.clientX;
    var y=event.clientY;
    var pos=mousePosition(event);
    x=x-bbox.left *(canvas.width / bbox.width);
    y=y - bbox.top  * (canvas.height / bbox.height);
	return {x:x,y:y};
}

3.ja 自定义map函数（修改了别人的）

/* **************************************** map bg*/
/*
 * map 示例 

 var map = new Map();
 map.put("a", "aaa");
 map.put("b","bbb");
 map.put("cc","cccc");
 map.put("c","ccc");
 map.remove("cc");
 map.clear();
 var array = map.keySet();
 for(var i in array) {
 document.write("key:(" + array[i] +") <br>value: ("+map.get(array[i])+") <br>");
}
*/


function Map(){
this.container = new Object();
}


Map.prototype.put = function(key, value){
this.container[key] = value;
}


Map.prototype.get = function(key){
return this.container[key];
}


Map.prototype.keySet = function() {
var keyset = new Array();
var count = 0;
for (var key in this.container) {
// 跳过object的extend函数
if (key == 'extend') {
continue;
}
keyset[count] = key;
count++;
}
return keyset;
}


Map.prototype.size = function() {
var count = 0;
for (var key in this.container) {
// 跳过object的extend函数
if (key == 'extend'){
continue;
}
count++;
}
return count;
}


Map.prototype.remove = function(key) {
delete this.container[key];
}
Map.prototype.clear=function(){
	var array = this.keySet();
	var n=array.length;
	for(var i=0;i<n;i++){
	    this.remove(array[i]);
	}
 	
}

Map.prototype.toString = function(){
var str = "";
for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
str = str + keys[i] + "=" + this.container[keys[i]] + ";\n";
}
return str;
}
/********************************************************** map ed */

4.js 简单的页面切换效果。

注：就是我数据结构写说明是用的，所有的都要在一个页面，用div分成几个部分，看代码后就会明白。

var saveId=new Array(),oldSelId=0;
saveId[0]="#demo_one";
saveId[1]="#demo_two";
saveId[2]="#demo_three";
function choose(n)
{
	if(oldSelId==n) return ;
	$(saveId[oldSelId]).fadeOut(500,function(){
	    switch(n){
	        case 0:
	        break;
	        case 1:
	        break;
	        case 2:
	           if($.trim($("#BSM_ini_3").html())==""){ //.trim IE不支持
                    demo_three_init();
                }
	        break;
	    }
		
		$(saveId[n]).fadeIn(500,function(){//初始化写在上面了，这里是完成后进行的。
		});
		
	});
	oldSelId=n;
}

5.悬浮层效果（这里只给了html的部分）

<div id="DivShow" style="display: none; position:absolute; z-index: 3; background-color: #ffffff" > </div>

6. 日起格式化（网上找的）

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
	alert(time1);

7.加载完页面后根据middle里面内容的高度重新调整布局大小。

function changeHeight()
{
	var ht=document.getElementById("middle").offsetHeight;
	document.getElementById("md_left").style.height=ht+"px";
	document.getElementById("md_right").style.height=ht+"px";
	//document.getElementById("md_left").style.background="repeat-y url(../../images/userBg/left.gif)";
	//document.getElementById("md_left").style.backgroundRepeat="repeat-y";
	//document.getElementById("md_left").style.backgroundImage="../../images/userBg/left.gif";
	
}
window.onload=changeHeight;

8.判断变量是否定义

if ( typeof(callbackfun) != "undefined" ) {
    callbackfun();
}