分类目录归档：JavaScript

js考试系统时间倒计时

发表于 2010 年 10 月 29 日 由 惜分飞

js实现时分倒计时、悬浮效果

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <meta HTTP-EQUIV="Content-Type" content="text/html; charset=gb2312" />
</head>
<body onload='ChangeTime();scall();'>
<form id="form1">
<!--模拟页面宽度高度-->
<div align="center">
<center>
<table width="770" height="3000" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
<tr>
<td width="100%" valign="top"></td>
</tr>
</table>
</center>
</div>
<!--弹出时间提示-->
<div id="Javascript.RightDiv" style="position: absolute;z-index:1000;width:200px;height:30px;top:-1000px;word-break:break-all;display:none;">
<div id="timeshow" style="width:200px;height:20px;line-height:20px;text-align:center;font-size:12px;color:#000;background-color:#CCC;border:1px solid #333;"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">
//弹出div
var showad = true;
var Toppx = 10;    //上端位置
var AdDivW = 200;   //宽度
var AdDivH = 25;   //高度
var PageWidth = 750; //页面多少宽度象素下正好不出现左右滚动条
var MinScreenW = 1000; //最小屏幕宽度象素
function scall(){
if(!showad){return;}
var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;
document.getElementById("Javascript.RightDiv").style.display="";
document.getElementById("Javascript.RightDiv").style.top=document.body.scrollTop+Toppx;
document.getElementById("Javascript.RightDiv").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.RightDiv").offsetWidth-Borderpx;
}
window.onscroll=scall;
window.onresize=scall;

//在线考试时间提示
var h=1; //设置考试时间(小时单位)  
var m=0.1; //设置考试时间(分钟单位)  
var timeShowId="timeshow"; //设置时间显示层ID  
var TimeNum=h*60*60+m*60;  
var timeStr;  
function ChangeTime()
{
  TimeNum--;
  
    if(TimeNum > 0)
    {
       timeStr=setTimeout("ChangeTime()",1000);
       if(TimeNum<300)
       {
         alert('距离系统自动提交时间还剩5分钟，请尽快做好提交准备');
       }
        if(TimeNum<30)
       {
         alert('距离系统自动提交时间还剩30秒，请马上交卷');
       }
    }
    else
    {  
       //系统提交  完善
    }  
    document.getElementById(timeShowId).innerHTML="系统提示：你的时间还剩<span style=\"color:#FF0000;\">"+Math.floor(TimeNum/60)+"分"+TimeNum%60+"秒</span>";
} 
</SCRIPT>
</form>  
</body >
</html>
发表在 JavaScript | 评论关闭

js控制网页在特定iframe中打开

发表于 2010 年 9 月 16 日 由 惜分飞

我们在编写系统管理后台时，很多时候会使用到iframe进行管理，但是有有个问题就是有些时候比较聪明的用户会绕过我们的iframe的父页面，而直接打开了iframe中src的内容，如果这样，重则给我们的系统带来破坏，轻则使我们系统的有些功能不能正常使用，今天用js写了一个控制脚本，可以让用户无法绕开iframe的父页而直接打开子页的内容进行浏览，主要通过在iframe在子父页面各加一段js脚本实现控制
父页面

function check_iframe() {
            var url = location.search;//包括？的参数
            if (url.indexOf("?")!=-1) {
                var str = url.substr(1); //传输过来的url
                document.getElementById("main").src = decodeURI(str);
            }
        }

说明：1、要使用onload或者类此这个事件加载该函数
2、main表示父页面中要显示子页面的iframe的id
3、传过来的url是通过get方式，使用encodeURI编码的
子页面

function check_page() {
    var iframe_url = document.referrer.toLowerCase();
    if (iframe_url == "") {
        document.location.href = "default.aspx?" + encodeURI(document.location.href);
    }
//防止在子页面中点击本页面自身超链时再次打开一个iframe
    else if (iframe_url.indexOf("default.aspx") == -1 && document.location.href.toLowerCase().indexOf(iframe_url) == -1) 
    { document.location.href = "default.aspx?" + encodeURI(document.location.href); }
}

说明：1、要使用onload或者类此这个事件加载该函数
2、supadmin.html表示是含有该页面显示的iframe的父页面
3、使用encodeURI对子页面的url进行了编码，使用get方式传送给父页面

发表在 JavaScript | 评论关闭

jquery插件弹出div

发表于 2010 年 8 月 12 日 由 惜分飞

一直在为弹出遮挡层的div烦恼着，今天网上找了下，发现jmpopups很不错，稍微修改下，基本上可以实现需要功能

总体HTML代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
 <script type="text/javascript">
 //<![CDATA[
 $.setupJMPopups({
 screenLockerBackground: "#003366",
 screenLockerOpacity: "0.7"
 });

 function openStaticPopup() {
 $.openPopupLayer({
 name: "myStaticPopup",
 width: 400,
 target: "myHiddenDiv"
 });
 }
 //]]>
 </script>
 <style type="text/css" media="screen">
 #myHiddenDiv {display:none;}
 .popup {background:#FFF; border:1px solid #333; padding:1px;}
 .popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
 .popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
 .popup-header .close-link {float:right; font-size:11px;}
 .popup-body {padding:10px;}
 </style>
</head>
<body>
<a href="javascript:void();" onclick="openStaticPopup();" title="Static example">添加Flash信息</a>
 <div id="myHiddenDiv">
 <div>
 <div>
 <h2>添加Flash信息</h2>
 <a href="javascript:void();" onclick="$.closePopupLayer('myStaticPopup');" title="Close">Close</a>
 <br clear="all" />
 </div>
 <div>
 <table>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td></td><td>提交</td></tr>
 </table>
 </div>
 </div>
 </div>
</body>
</html>

jmpopups代码：


(function($) {
 var openedPopups = [];
 var popupLayerScreenLocker = false;
 var focusableElement = [];
 var setupJqueryMPopups = {
 screenLockerBackground: "#000",
 screenLockerOpacity: "0.5"
 };

 $.setupJMPopups = function(settings) {
 setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
 return this;
 }

 $.openPopupLayer = function(settings) {
 if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
 settings = jQuery.extend({
 width: "auto",
 height: "auto",
 parameters: {},
 target: "",
 success: function() {},
 error: function() {},
 beforeClose: function() {},
 afterClose: function() {},
 reloadSuccess: null,
 cache: false
 }, settings);
 loadPopupLayerContent(settings, true);
 return this;
 }
 }

 $.closePopupLayer = function(name) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 var thisPopup = openedPopups[i];

 openedPopups.splice(i,1)

 thisPopup.beforeClose();

 $("#popupLayer_" + name).fadeOut(function(){
 $("#popupLayer_" + name).remove();

 focusableElement.pop();

 if (focusableElement.length > 0) {
 $(focusableElement[focusableElement.length-1]).focus();
 }

 thisPopup.afterClose();
 hideScreenLocker(name);
 });

 break;
 }
 }
 } else {
 if (openedPopups.length > 0) {
 $.closePopupLayer(openedPopups[openedPopups.length-1].name);
 }
 }

 return this;
 }

 $.reloadPopupLayer = function(name, callback) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 if (callback) {
 openedPopups[i].reloadSuccess = callback;
 }

 loadPopupLayerContent(openedPopups[i], false);
 break;
 }
 }
 } else {
 if (openedPopups.length > 0) {
 $.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
 }
 }

 return this;
 }

 function setScreenLockerSize() {
 if (popupLayerScreenLocker) {
 $('#popupLayerScreenLocker').height($(document).height() + "px");
 $('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
 }
 }

 function checkIfItExists(name) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 return true;
 }
 }
 }
 return false;
 }

 function showScreenLocker() {
 if ($("#popupLayerScreenLocker").length) {
 if (openedPopups.length == 1) {
 popupLayerScreenLocker = true;
 setScreenLockerSize();
 $('#popupLayerScreenLocker').fadeIn();
 }

 if ($.browser.msie && $.browser.version < 7) {
 $("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
 }

 $('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
 } else {
 $("body").append("<div id='popupLayerScreenLocker'><!-- --></div>");
 $("#popupLayerScreenLocker").css({
 position: "absolute",
 background: setupJqueryMPopups.screenLockerBackground,
 left: "0",
 top: "0",
 opacity: setupJqueryMPopups.screenLockerOpacity,
 display: "none"
 });
 showScreenLocker();

 $("#popupLayerScreenLocker").click(function() {
 $.closePopupLayer();
 });
 }
 }

 function hideScreenLocker(popupName) {
 if (openedPopups.length == 0) {
 screenlocker = false;
 $('#popupLayerScreenLocker').fadeOut();
 } else {
 $('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
 }

 if ($.browser.msie && $.browser.version < 7) {
 $("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
 }
 }

 function setPopupLayersPosition(popupElement, animate) {
 if (popupElement) {
 if (popupElement.width() < $(window).width()) {
 var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
 } else {
 var leftPosition = document.documentElement.scrollLeft + 5;
 }

 if (popupElement.height() < $(window).height()) {
 var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
 } else {
 var topPosition = document.documentElement.scrollTop + 5;
 }

 var positions = {
 left: leftPosition + "px",
 top: topPosition + "px"
 };

 if (!animate) {
 popupElement.css(positions);
 } else {
 popupElement.animate(positions, "slow");
 }

 setScreenLockerSize();
 } else {
 for (var i = 0; i < openedPopups.length; i++) {
 setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
 }
 }
 }

 function showPopupLayerContent(popupObject, newElement, data) {
 var idElement = "popupLayer_" + popupObject.name;

 if (newElement) {
 showScreenLocker();

 $("body").append("<div id='" + idElement + "'><!-- --></div>");

 var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
 }  else {
 var zIndex = $("#" + idElement).css("z-index");
 }

 var popupElement = $("#" + idElement);

 popupElement.css({
 visibility: "hidden",
 width: popupObject.width == "auto" ? "" : popupObject.width + "px",
 height: popupObject.height == "auto" ? "" : popupObject.height + "px",
 position: "absolute",
 "z-index": zIndex
 });

 var linkAtTop = "<a href='#' class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;'>&nbsp;</a><input class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;' />";
 var linkAtBottom = "<a href='#' class='jmp-link-at-bottom' style='position:absolute; left:-9999px; bottom:-1px;'>&nbsp;</a><input class='jmp-link-at-bottom' style='position:absolute; left:-9999px; top:-1px;' />";

 popupElement.html(linkAtTop + data + linkAtBottom);

 setPopupLayersPosition(popupElement);

 popupElement.css("display","none");
 popupElement.css("visibility","visible");

 if (newElement) {
 popupElement.fadeIn();
 } else {
 popupElement.show();
 }

 $("#" + idElement + " .jmp-link-at-top, " +
 "#" + idElement + " .jmp-link-at-bottom").focus(function(){
 $(focusableElement[focusableElement.length-1]).focus();
 });

 var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
 "#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");

 if (jFocusableElements.length == 0) {
 var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'>&nbsp;</a>";
 popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
 focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
 } else {
 jFocusableElements.each(function(){
 if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
 focusableElement.push(this);
 return false;
 }
 });
 }
 $(focusableElement[focusableElement.length-1]).focus();
 popupObject.success();

 if (popupObject.reloadSuccess) {
 popupObject.reloadSuccess();
 popupObject.reloadSuccess = null;
 }
 }

 function loadPopupLayerContent(popupObject, newElement) {
 if (newElement) {
 openedPopups.push(popupObject);
 }
 if (popupObject.target != "") {
 showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
 } else {
 $.ajax({
 url: popupObject.url,
 data: popupObject.parameters,
 cache: popupObject.cache,
 dataType: "html",
 method: "GET",
 success: function(data) {
 showPopupLayerContent(popupObject, newElement, data);
 },
 error: popupObject.error
 });
 }
 }

 $(window).resize(function(){
 setScreenLockerSize();
 setPopupLayersPosition();
 });

 $(document).keydown(function(e){
 if (e.keyCode == 27) {
 $.closePopupLayer();
 }
 });
})(jQuery);

使用说明：

myHiddenDiv表示要弹出来的整体div

popup-body中的内容替换为你需要的内容

openStaticPopup();表示弹出div，锁定界面

$.closePopupLayer(‘myStaticPopup’);表示关闭div，解锁界面

<h2></h2>弹出div的标题

openStaticPopup中的width表示弹出div的宽度

其实就是细节上的调整

效果

jquery.jmpopups（弹出div，锁住界面）

发表在 JavaScript | 一条评论