php+ajax实现数据调用
var xmlHttp function showUser(str) //这就是上面调用的函数体
{
xmlHttp=GetXmlHttpObject() //首先判断浏览器是否支持HTTP Request
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php" //这里是你的PHP函数名,就是这个函数里写的SQL语句拉.
url=url+"?q="+str //这是后面跟的参数
url=url+"&sid="+Math.random() //他在在这里创建了一个随机数
xmlHttp.onreadystatechange=stateChanged //调用stateChanged判断状态(这里的有些东西大家要查一下)
xmlHttp.open("GET",url,true) //OPEN传递进来的URL TRUE就是表示异步传输,就是页面不刷新
xmlHttp.send(null) //发送
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") //判断readyState的状态
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
//红色部分感觉熟悉吗?就是上面HTML页面里的ID号.这里将返回的结果innerHTML的方法写进txtHint
}
} //下面这个函数是针对不用浏览器对XMLHttpRequest的不同支持而写的不同创建方法
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
//下面的echo语句就是要返回给前台页面的HTML代码.最后就是下面这些HTML代码显示在ID为
txtHint的DIV里面
echo "";
while($row = mysql_fetch_array($result))
{
echo "[tr]";
echo "[td]" . $row['FirstName'] . "[/td]";
echo "[td]" . $row['LastName'] . "[/td]";
echo "[td]" . $row['Age'] . "[/td]";
echo "[td]" . $row['Hometown'] . "[/td]";
echo "[td]" . $row['Job'] . "[/td]";
echo "[/tr]";
}
echo "[table][tr][td]Firstname[/td][td]Lastname[/td][td]Age[/td][td]Hometown[/td][td]Job[/td][/tr][/table]";
mysql_close($con);
?>
PHP and AJAX responseXML 实例教程
AJAX技术可以用来恢复的数据库信息为XML 。
AJAX的数据库为XML的例子
在AJAX以下例子,我们将演示如何网页上可以卖到信息从一个MySQL数据库,它转换为一个XML文档,并用它来显示信息在几个不同的地方。
这个例子我似乎很像“ PHP的AJAX技术数据库”例如,在最后一章,但是有一个很大的不同:在这个例子中我们得到的数据从PHP的XML网页使用responseXML功能。
接收的响应作为XML文件使我们能够更新这个网页好几个地方,而不是只接受一个PHP输出和显示它。
在这个例子中,我们将更新一些<span>内容与我们所收到的信息从数据库中。
id | FirstName | LastName | Age | Hometown | Job |
---|---|---|---|---|---|
1 | Peter | Griffin | 41 | Quahog | Brewery |
2 | Lois | Griffin | 40 | Newport | Piano Teacher |
3 | Joseph | Swanson | 39 | Quahog | Police Officer |
4 | Glenn | Quagmire | 41 | Quahog | Pilot |
<html> <head> <script src="responsexml.js"></script> </head> <body>
<form> Select a User: <select name="users" onchange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form>
<h2><span id="firstname"></span> <span id="lastname"></span></h2> <span id="job"></span> <div style="text-align: right"> <span id="age_text"></span> <span id="age"></span> <span id="hometown_text"></span> <span id="hometown"></span> </div>
</body> </html>
例如解释-的H TML表单
在HTML表单是一个下拉框中所谓的“用户”的名字和“身份证”从数据库,作为选择的价值。
下面的形式有几种不同的<span>要素是用来作为占位符的不同的价值观,我们将检索。
当用户选择的数据,一个函数称为“ showUser ( ) ”执行。执行的职能是引发的“ onchange ”事件。
换句话说:每一次变化的用户的价值在下拉框中,功能showUser ( )被调用和产出的结果在指定的<span>内容。
转载请注明来自http://www.111cn.net/wy/yw.html
的JavaScript
这是JavaScript代码存储在文件中“ responsexml.js ” :var xmlHttpfunction showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="responsexml.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { xmlDoc=xmlHttp.responseXML; document.getElementById("firstname").innerHTML= xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue; document.getElementById("lastname").innerHTML= xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue; document.getElementById("job").innerHTML= xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue; document.getElementById("age_text").innerHTML="Age: "; document.getElementById("age").innerHTML= xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue; document.getElementById("hometown_text").innerHTML="<br/>From: "; document.getElementById("hometown").innerHTML= xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue; } }function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }例如解释
该showUser ( )和GetXmlHttpObject职能是一样的PHP的AJAX章数据库,您可以去那里解释这些。
该stateChanged ( )函数
如果一个项目在下拉框中选择执行的功能如下:
界定了“语法”变量作为一个XML文件使用responseXML功能
检索数据从XML文件和使他们在正确的<span>内容
PHP页面
该服务器的页面要求的JavaScript ,是一个简单的PHP文件名为“ responsexml.php ” 。
该网页是PHP写成的,并使用一个MySQL数据库。
该代码运行一个SQL查询的数据库,并返回结果作为一个XML文件:<?php header('Content-Type: text/xml'); header("Cache-Control: no-cache, must-revalidate"); //A date in the past header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");$q=$_GET["q"];$con = mysql_connect('localhost', 'peter', 'abc123'); if (!$con) { die('Could not connect: ' . mysql_error()); }mysql_select_db("ajax_demo", $con);$sql="SELECT * FROM user WHERE id = ".$q."";$result = mysql_query($sql);echo '<?xml version="1.0" encoding="ISO-8859-1"?> <person>'; while($row = mysql_fetch_array($result)) { echo "<firstname>" . $row['FirstName'] . "</firstname>"; echo "<lastname>" . $row['LastName'] . "</lastname>"; echo "<age>" . $row['Age'] . "</age>"; echo "<hometown>" . $row['Hometown'] . "</hometown>"; echo "<job>" . $row['Job'] . "</job>"; } echo "</person>";mysql_close($con); ?> 转载请注明来自http://www.111cn.net/wy/yw.html
<!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=gb2312" />
<style>
*{font: 12px '宋体'}
.tab_suggest{border:1px solid #333; background:#fff; position:absolute; z-index:101; visibility: hidden;}
.tab_suggest th, .tab_suggest td{font:12px '宋体'; font-weight:normal; height:17px; text-align:left; line-height:17px; padding:2px 3px; white-space:nowrap; cursor: default;}
.tab_suggest td{color:#008000; text-align:right;}
.tab_suggest tr.cur{background:#36c; color:#fff}
.tab_suggest tr.cur td{color:#fff}
</style>
<title>无标题文档</title>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript">
window.onload=function(){
var mySuggest = new hansir.TextSuggest();
mySuggest.add_suggest('textSuggest', 'suggest.php', 'post');
mySuggest.add_suggest('textSuggest2', 'suggest.php', 'post', 100);
$('textSuggest').focus();
}
</script>
</head>
<body>
<br /><br />
<form action="suggest.php" method="post"><input type="hidden" name="add" value="add" />
没有迟延:<input type="text" id="textSuggest" name="keyword" style="width:300px;" autocomplete="off" /> <input type="submit" value="提 交" />
</form>
<br /><br /><br />
<form action="suggest.php" method="post"><input type="hidden" name="add" value="add" />
迟延100ms:<input type="text" id="textSuggest2" name="keyword" style="width:300px;" autocomplete="off" /> <input type="submit" value="提 交" />
</form>
</body>
</html>
最后的html文件.
调用:
后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。
页面onload后调用(因为有body.appendChild方法)
var mySuggest = new hansir.TextSuggest();
mySuggest.add_suggest(inp, url, method, defer, defer2);
除了前两项必填,后三项都是可选的
inp :输入框ID名。
url :ajax请求的后台服务器页面地址。
method :发送方试 get或post,默认post。
defer :按键计时,即用户输入字符多久后请求服务器,默认不计时,用户输入字符后立即发送。
defer2 :服务器返回结果计时,即服务器发送请求后多长时间没有返回数据,列表自动隐藏,默认200ms。
测试说明:
1、数据库存放的是临时数据。
2、可以输入“中华人民共和国”,“中”,”蓝色“ 测试。
3、可以输入一些其他的自定义数据,提交存到表里,然后就可以用刚刚提交的数据测试。
4、我的服务器网速慢,可能有个别卡的现象。
5、迟延:用户输入字符多久后请求服务器,照顾输入快的用户 :)
— 如果服务器速度够快可以考虑迟延,如果慢就无所谓了,反正是一个请求完成才会进行下一个 :)
已知缺陷:
1、下拉提示框位置问题:因为是以BODY为参考,所以位置会随body大小改变(下拉列表显示时拖动窗口大小可看效果)。
— 解决方法:真正用时可以根据input的父元素定位(这样还可以省些资源,即不毕每次显示下拉框都计算位置)。
2、用五笔输入法在FF下输入完成后上下方向键不好使要切换一下输入法才可以,拼音则正常。
— 解决方法:google也有同样问题,所以。。。 :)。
CREATE TABLE `suggest` (
`id` int(10) unsigned NOT NULL auto_increment,
`keyword` varchar(50) NOT NULL,
`num` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=gb2312 AUTO_INCREMENT=59 ;
/*
****************************
*** http://www.hansir.cn ***
****************************
*/
String.prototype.ltrim = function(){
return this.replace(/^s*(.+?)$/,'$1');
}
//这里引用prototype的五个方法
function $(){return document.getElementById(arguments[0]);}
Object.extend = function(destination, source){
for(property in source) destination[property] = source[property];
return destination;
}
function $A(iterable) {
var results = [];
for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);
return results;
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event || window.event);
}
}
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
var hansir = {
url: 'http://www.hansir.cn'
}
hansir.AjAx = function(){this.initialize.apply(this, arguments);}
hansir.AjAx.prototype = {
initialize: function(complete, method, url){
this.complete = complete;
this.method = method || 'post';
this.url = url;
if (this.method == 'get') this.url += (this.url.match(/?/) ? '&' : '?');
},
xmlHttp: function(){
var xmlHttp;
if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
else if(window.ActiveXObject)
try{
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}catch(errr){
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
},
request: function(parameters){
var xmlHttp = this.xmlHttp();
var send_val = null;
this.method=='get' ? this.url += parameters : send_val = parameters;
xmlHttp.open(this.method, this.url, true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
xmlHttp.onreadystatechange = this.ready_handler.bind(this, xmlHttp);
xmlHttp.send(send_val);
},
ready_handler: function(xmlHttp){
if(xmlHttp.readyState == 4){
if(this.success(xmlHttp)){
this.complete.load_data(xmlHttp);
}
}
},
success: function(xmlHttp){return xmlHttp.status == 0 || xmlHttp.status >= 200 && xmlHttp.status < 300}
}
hansir.TextSuggest = function(){this.initialize.apply(this, arguments);}
hansir.TextSuggest.prototype = {
initialize: function(){},
add_suggest: function(inp, url, method, defer, defer2){
var inp = $(inp);
inp.defer = defer || null;
inp.defer2 = defer2 || 200;
var sw = inp.offsetWidth, sh = inp.offsetHeight;
inp.suggest_list = this.create_list(sw, sh);
inp.suggest_list.par = inp;
inp.xmlHttp = new hansir.AjAx(inp.suggest_list, method, url);
Object.extend(inp, {
requesting : false,
last_result : true,
previous_value : null,
last_value : null,
kt : null,
rt : null,
load_event: function(){
if(this.addEventListener){
this.addEventListener('input', this.keyup_handler.bindAsEventListener(this),false);
}else if(this.attachEvent){
this.attachEvent('onkeyup', this.keyup_handler.bindAsEventListener(this));
}
},
keyup_handler:function(e){
var intKey;
window.event ? intKey = event.keyCode : intKey = e.which;
if(intKey == 38 || intKey == 40 || intKey == 13 || intKey == 37) return;
if(this.requesting) return;
var val = this.value.ltrim();
this.last_value = val;
if(val == this.previous_value) return;
if(val==''){
this.previous_value = '';
this.last_value='';
this.suggest_list.hidden();
this.suggest_list.clear_data();
return;
}
if(new RegExp('^'+this.last_result,'i').test(val)) return;
this.last_result = true;
this.previous_value = val;
if(this.kt) clearTimeout(this.kt);
this.defer?this.kt = setTimeout(this.send_request.bind(this), this.defer):this.send_request();
},
onblur: function(){
setTimeout(this.suggest_list.hidden.bind(this.suggest_list), 100);
},
onkeydown: function(e){ // 上下、回车键事件
if(!this.suggest_list.rows.length) return;
var intKey;
window.event ? intKey = event.keyCode : intKey = e.which;
switch(intKey){
case 38:
if(this.suggest_list.style.visibility=='hidden'){
this.suggest_list.visible();
return;
}
var val = this.suggest_list.select_index(1);
val?this.value=val : this.value = this.last_value;
break;
case 40:
if(this.suggest_list.style.visibility=='hidden'){
this.suggest_list.visible();
return;
}
var val=this.suggest_list.select_index(0);
val?this.value=val : this.value = this.last_value;
break;
case 13:
if(this.suggest_list.cur_tr!=-1){
this.suggest_list.hidden();
break;
}
case 39:
this.suggest_list.hidden();
this.keyup_handler('o');
}
},
send_request: function(){ // 请求数据
this.requesting = true;
var val = this.value;
var parameters = 'keyword=' + val.ltrim();
this.xmlHttp.request(parameters);
this.start_hidden_time();
},
start_hidden_time: function(){
if(this.rt) clearTimeout(this.rt);
this.rt = setTimeout(this.list_hidden.bind(this), this.defer2);
},
list_hidden: function(){
if(this.requesting) this.suggest_list.hidden();
}
});
inp.load_event();
},
create_list: function(w, h){ //创建列表
var table = document.createElement('table');
table.cellSpacing = 0;
document.body.appendChild(table);
table.className = 'tab_suggest';
table.style.width = w + 'px';
table.parh = h-1;
Object.extend(table,{
cur_tr: -1,
set_pos: function(){ // 下垃框位置
var x=0, y=0, inp = this.par;
while(inp != null){x += inp.offsetLeft;y += inp.offsetTop;inp = inp.offsetParent;}
inp = null;
table.style.left = x + 'px';
table.style.top = y+this.parh+ 'px';
},
add: function(str, num){
var n=0;
this.rows.length ? n=this.rows.length : n = 0;
var tr = this.insertRow(n);
var th = document.createElement('th');
var td = document.createElement('td');
th.innerHTML = str, td.innerHTML = num;
tr.appendChild(th), tr.appendChild(td);
tr.num = this.rows.length-1;
tr.par = this;
tr.onmouseover = function(){
var par = this.par;
if(par.cur_tr!=-1 && par.cur_tr!=this.num){
par.rows[par.cur_tr].className='';
this.className = 'cur';
par.cur_tr = this.num;
}else{
this.className = 'cur';
par.cur_tr = this.num;
}
}
tr.onclick = function(){
var par = this.par.par;
par.value = this.cells[0].innerHTML;
}
tr = null, th = null, td = null;
},
load_data: function(xmlHttp){ // 加载列表
var inp = this.par;
if(inp.previous_value != inp.value){
inp.requesting = false;
this.clear_data();
inp.keyup_handler('o');
return;
}
var arr = xmlHttp.responseText;
if(arr.ltrim() == 'null'){
inp.last_result = inp.value;
inp.requesting = false;
inp.suggest_list.hidden();
this.clear_data();
return;
}
var cur_data = eval(arr);
this.clear_data();
for(var i=0; i<cur_data.length; i++)this.add(cur_data[i][0],cur_data[i][1]);
this.cur_tr = -1;
this.visible();
inp.requesting = false;
},
clear_data: function(){while(this.rows.length)this.deleteRow(this.rows[0])}, // 清空列表
select_index: function(n){ // 移动选项
if(n){
if(this.cur_tr==0){
this.rows[0].className = '';
this.cur_tr = -1;
return false;
}else{
this.cur_tr==-1?this.cur_tr=this.rows.length : this.rows[this.cur_tr].className = '';
this.cur_tr = this.cur_tr-1;
this.rows[this.cur_tr].className = 'cur';
return this.rows[this.cur_tr].cells[0].innerHTML;
}
}else{
if(this.cur_tr == (this.rows.length-1)){
this.rows[this.cur_tr].className= '';
this.cur_tr = -1;
return false;
}else{
if(this.cur_tr!=-1)this.rows[this.cur_tr].className = '';
this.cur_tr = this.cur_tr+1;
this.rows[this.cur_tr].className = 'cur';
return this.rows[this.cur_tr].cells[0].innerHTML;
}
}
},
hidden: function(){this.style.visibility = 'hidden';}, // 隐
visible: function(){this.set_pos(); this.style.visibility = 'visible';} // 显
});
return table;
}
}
php+ajax 仿google 下拉框代码一,这里php代码
<?php
header('Content-Type:text/html;charset=utf-8');
require('../../admin/include/db_conf.php');
if($_POST['add']){
$keyword = trim($_POST['keyword']);
if(empty($keyword)){
header("LOCATION: suggest.html");
exit;
}
$db = db_connect();
$db->query("set names 'gb2312'");
$sql = "select*from suggest where keyword = '$keyword'";
if($db->query($sql)->num_rows>0){
header("LOCATION: suggest.html");
exit;
}
$num = rand(15, 2008);
$sql = "insert into suggest values(NULL, '$keyword', $num)";
$db->query($sql);
$db = NULL;
header("LOCATION: suggest.html");
exit;
}
$keyword = $_POST['keyword'];
if(empty($keyword)){
echo 'null';
exit;
}
$db = db_connect();
$db->query("set names 'utf8'");
$sql = "select *from suggest where keyword REGEXP '^$keyword' order by id desc limit 0, 15";
$result = $db->query($sql);
if($result->num_rows<1){
echo 'null';
exit;
}
$arr = array();
while($rows=$result->fetch_object()){
$keyword = $rows->keyword;
$arr[]="['$keyword', '$rows->num ".iconv('gb2312','utf-8','结果')."']";
}
$arr = '['.implode(',',$arr).']';
echo $arr;
?>
相关文章
- 本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧...2021-05-17
- 这篇文章主要介绍了Spring AOP 对象内部方法间的嵌套调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-08-29
- 最基础的对数据的增加删除修改操作实例,菜鸟们收了吧...2013-09-26
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
- 这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25
- 这篇文章主要介绍了c# 三种方法调用WebService接口的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-07
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
- 在php中解析xml文档用专门的函数domdocument来处理,把json在php中也有相关的处理函数,我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25
- 这篇文章主要介绍了mybatis-plus 处理大数据插入太慢的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-18
- 这篇文章主要介绍了postgresql数据添加两个字段联合唯一的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-04
Vue生命周期activated之返回上一页不重新请求数据操作
这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
- 这篇文章主要介绍了解决Vue watch里调用方法的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07