<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自动输入email、时间和域名</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="completer.css"/>
<script src="jquery-1.10.1.min.js"></script>
<script src="completer.min.js"></script>
<script type="text/javascript">
$(function() {
$("#auto-complete-email").completer({
separator: "@",
source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
});
$("#auto-complete-time").completer({
filter: function(val) {
val = val.replace(/\D/g, "").substr(0, 2);
if (val) {
val = parseInt(val, 10) || 0;
val = val > 23 ? 23 : val < 10 ? "0" + val : val;
}
return val;
},
separator: ":",
source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
});
var $autoCompleteDomain = $("#auto-complete-domain"), $autoCompleteGo = $("#auto-complete-go");
$autoCompleteDomain.completer({
complete: function() {
var url = "http://www." + $autoCompleteDomain.val();
$autoCompleteGo.attr("href", url);
},
separator: ".",
source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
});
});
</script>
</head>
<body>
<div class="container">
<div class="demo">
<p>1、输入邮箱号：</p>
<input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/>
<p> </p>
<p>2、输入时间：</p>
<input type="text" id="auto-complete-time" class="input"/>
<p> </p>
<p>3、输入域名：</p>
<div class="input-group">
<span class="input-group-addon">www.</span>
<input id="auto-complete-domain" class="input" type="text" placeholder="请输入域名" autocomplete="off" />
<span class="input-group-btn">
<a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a>
</span>
</div>
</div>
</div>
</body>
</html>
效果图：
相关推荐
标题“JQ输入时间并欢迎”可能指的是一个基于JavaScript库jQuery（JQ）实现的交互式功能，它允许用户输入时间后显示欢迎信息。在这个场景中，我们可以详细探讨以下几个相关知识点： 1. **jQuery库**：jQuery是一个...
"JQ 自动生成目录和点击跳转固定位置"是一个常见的功能需求，尤其在长篇幅的文章或文档展示中，能够帮助用户快速导航并定位到感兴趣的部分。下面我们将深入探讨这一主题。 首先，生成目录通常是通过解析HTML中的...
自动登录JQ
通过设置定时器（如JavaScript的setInterval函数），在一定时间间隔后自动切换到下一张图片。同时，需要处理停止和重新启动轮播的情况，例如当鼠标悬停在轮播区域时停止，鼠标离开时恢复。 4. **手动控制**：除了...
在IT行业中，前端开发经常会遇到需要用户输入日期或时间的情况，这时使用日期控件就显得尤为重要。"jq 日期控件 可选择时间，日期，星期等等" 是一个专为JavaScript（js）环境设计的日期选择插件，它提供丰富的功能...
"jQ导出PDF自动分页打印代码.zip" 提供的是一套基于jQuery和CSS特效的解决方案，旨在帮助开发者高效地完成这项任务。下面我们将详细探讨这个代码包中的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它...
首先，"JQ年月时间控件"通常指的是一个前端界面组件，用于让用户方便地选择年份和月份。在网页应用中，这种控件常见于日期输入、日历插件或者表单验证等场景。它能够提供友好的用户交互，使得用户能够快速、准确地...
其次，日期时间选择插件是前端开发中常见的组件，它们通常用于日程安排、预订系统或任何需要用户输入日期和时间的场景。这些插件可以自定义样式、格式化日期显示、设置日期范围限制等，以满足不同的项目需求。jQuery...
标题“JQ 自动加载页面”指的是使用jQuery库实现页面内容的自动加载功能。这种技术在网页开发中常用于分页、无限滚动或是动态加载更多内容的场景，以提高用户体验，减少用户手动翻页的繁琐操作。jQuery是一个流行的...
jjquery获取网站域名
用户在选择时间后，插件会自动更新`<input>`标签的值，方便后端处理。 总结起来，这个基于jQuery的时间插件通过限制用户只能选择当前或未来的日期，为应用程序提供了可靠的时间输入机制。通过适当的配置，我们可以...
如果用户已经输入了'@'，则查找与输入的域名部分相匹配的邮箱后缀。如果找到匹配项，它将在文本框的占位符中显示匹配的后缀作为提示。如果没有匹配的后缀，或者用户未输入'@'，则清空占位符。 请注意，上述代码只是...
在本文中，我们将深入探讨如何使用JavaScript（JS）和jQuery（JQ）库来实现一个时间轴切换特效。时间轴是一种强大的设计工具，它能够清晰地展示一系列事件或过程，尤其适用于项目管理、历史叙述或者产品发展过程的...
标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...
jQuery 点击按钮自动增加，和减少.
"JQ选择时间插件"就是这样一个工具，它专注于时间选择的便捷性和灵活性，特别适合用于表单输入或者日程管理等场景。这个插件名为laydate，是一个基于jQuery的轻量级组件，它提供了丰富的选择类型和强大的自定义能力...
本文将详细解析"JQ+CSS超酷时间翻板代码"的相关知识点，帮助你理解和运用这个独特的时钟效果。 首先，jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。它的API设计...
JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转...
4. **定时器**：使用`setInterval()`或`setTimeout()`函数，配合`.stop()`方法，可以实现轮播图的自动播放功能，每隔一定时间自动切换到下一张图片。 5. **数据存储与状态管理**：为了记住当前显示的图片索引以及...