input输入框输入提示
input输入框输入提示
为了提高用户体验我们常常会在用户输入信息,还未提交之前给用户提示,这样就达到的提高用户体验的基本的.
<html>
<body>
<div style="border:1px dashed #ccc;width:300px;height:200px;padding:20px">
<input type="text" name="test" id="test" /> <span style="color:red;font-weight:bold" id="help"></span>
<script type="text/javascript">
document.getElementById("test").onclick=function(){
if(document.getElementById("help").innerHTML==""){
document.getElementById("help").innerHTML="请输入汉字";
}
}
</script>
</div>
</body>
</html>
WEB标准是什么？
呵呵，说是WEB标准，不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。
刚刚上面提到了——DIV+CSS，呵呵，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？
1、节约运营成本，省钱啊！
呵呵，能帮你省钱的东西，你会不会有兴趣？当然是十分的有兴趣了。看看我们的WEB标准制作方法是如何做到的？
采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。
而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好，且有机会获得更多的用户
现在来说说用户友好。首先我想把我们的用户来分下类。
第一类：普通用户（每个访问我们网站的人）；
第二类：搜索引擎；
采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。
而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签） 等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。
一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？呵呵，这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。^-^!
呵呵，温习完了基础课程，现在正式开始讲XHTML和CSS的技巧了。
合理的布局
有朋友会开始问了，怎么一开始就开始讲合理的布局了呢?呵呵,前面我们提到了一些知识点——“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。
那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？恩，这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。
怎么样获得上传文件的扩展名.
怎么样获得上传文件的扩展名.
例如:c:\lovebbbb\ccc.gif
我想取得.gif
方法一
<script>
str = "c:\aaa\bb.ccc.dd.gif";
alert("."+str.split(".")[str.split(".").length-1]);
</script>
方法二
<script>
str = "c:\aaa\bb.gif";
alert("."+str.split(".")[1]);
</script>
asp,php,js获取图片大小并控制
本文章讲了二种获取图片的大小,第一种是php ,第二种是js 第三种是asp的,js 获取图片大小然后再用js 改变图片大小,下面我们有例子说明.
php相当简单的,用getimagesize 函数就行了,我们只要对得到的数组进行处理就行了.
<?
$arr=getimagesize("images/album_01.gif");
echo $arr[3];
$strarr=explode("\"",$arr[3]);
echo $strarr[1];
?>
再看看asp获取图片大小并进行缩放的函数
<%
Class ImgWHInfo ’获取图片宽度和高度的类，支持JPG，GIF，PNG，BMP
Dim ASO
Private Sub Class_Initialize
Set ASO=Server.CreateObject("ADODB.Stream")
ASO.Mode=3
ASO.Type=1
ASO.Open
End Sub
Private Sub Class_Terminate
Err.Clear
Set ASO=Nothing
End Sub
Private Function Bin2Str(Bin)
Dim I, Str
For I=1 To LenB(Bin)
clow=MidB(Bin,I,1)
If ASCB(clow)<128 Then
Str = Str & Chr(ASCB(clow))
Else
I=I+1
If I <= LenB(Bin) Then Str = Str & Chr(ASCW(MidB(Bin,I,1)&clow))
End If
Next
Bin2Str = Str
End Function
Private Function Num2Str(Num,Base,Lens)
Dim Ret
Ret = ""
While(Num>=Base)
Ret = (Num Mod Base) & Ret
Num = (Num - Num Mod Base)/Base
Wend
Num2Str = Right(String(Lens,"0") & Num & Ret,Lens)
End Function
Private Function Str2Num(Str,Base)
Dim Ret,I
Ret = 0
For I=1 To Len(Str)
Ret = Ret *base + Cint(Mid(Str,I,1))
Next
Str2Num=Ret
End Function
Private Function BinVal(Bin)
Dim Ret,I
Ret = 0
For I = LenB(Bin) To 1 Step -1
Ret = Ret *256 + AscB(MidB(Bin,I,1))
Next
BinVal=Ret
End Function
Private Function BinVal2(Bin)
Dim Ret,I
Ret = 0
For I = 1 To LenB(Bin)
Ret = Ret *256 + AscB(MidB(Bin,I,1))
Next
BinVal2=Ret
End Function
Private Function GetImageSize(filespec)
Dim bFlag
Dim Ret(3)
ASO.LoadFromFile(filespec)
bFlag=ASO.Read(3)
Select Case Hex(binVal(bFlag))
Case "4E5089":
ASO.Read(15)
ret(0)="PNG"
ret(1)=BinVal2(ASO.Read(2))
ASO.Read(2)
ret(2)=BinVal2(ASO.Read(2))
Case "464947":
ASO.read(3)
ret(0)="gif"
ret(1)=BinVal(ASO.Read(2))
ret(2)=BinVal(ASO.Read(2))
Case "535746":
ASO.read(5)
binData=ASO.Read(1)
sConv=Num2Str(ascb(binData),2 ,8)
nBits=Str2Num(left(sConv,5),2)
sConv=mid(sConv,6)
While(len(sConv)<nBits*4)
binData=ASO.Read(1)
sConv=sConv&Num2Str(AscB(binData),2 ,8)
Wend
ret(0)="SWF"
ret(1)=Int(Abs(Str2Num(Mid(sConv,1*nBits+1,nBits),2)-Str2Num(Mid(sConv,0*nBits+1,nBits),2))/20)
ret(2)=Int(Abs(Str2Num(Mid(sConv,3*nBits+1,nBits),2)-Str2Num(Mid(sConv,2*nBits+1,nBits),2))/20)
Case "FFD8FF":
Do
Do: p1=binVal(ASO.Read(1)): Loop While p1=255 And Not ASO.EOS
If p1>191 And p1<196 Then Exit Do Else ASO.read(binval2(ASO.Read(2))-2)
Do:p1=binVal(ASO.Read(1)):Loop While p1<255 And Not ASO.EOS
Loop While True
ASO.Read(3)
ret(0)="JPG"
ret(2)=binval2(ASO.Read(2))
ret(1)=binval2(ASO.Read(2))
Case Else:
If left(Bin2Str(bFlag),2)="BM" Then
ASO.Read(15)
ret(0)="BMP"
ret(1)=binval(ASO.Read(4))
ret(2)=binval(ASO.Read(4))
Else
ret(0)=""
End If
End Select
ret(3)="width=""" & ret(1) &""" height=""" & ret(2) &""""
getimagesize=ret
End Function
Public Function imgW(IMGPath)
Dim FSO,IMGFile,FileExt,Arr
Set FSO = Server.CreateObject("Scripting.FileSystemObject")
If (FSO.FileExists(IMGPath)) Then
Set IMGFile = FSO.GetFile(IMGPath)
FileExt=FSO.GetExtensionName(IMGPath)
Select Case FileExt
Case "gif","bmp","jpg","png":
Arr=GetImageSize(IMGFile.Path)
imgW = Arr(1)
End Select
Set IMGFile=Nothing
Else
imgW = 0
End If
Set FSO=Nothing
End Function
Public Function imgH(IMGPath)
Dim FSO,IMGFile,FileExt,Arr
Set FSO = server.CreateObject("Scripting.FileSystemObject")
If (FSO.FileExists(IMGPath)) Then
Set IMGFile = FSO.GetFile(IMGPath)
FileExt=FSO.GetExtensionName(IMGPath)
Select Case FileExt
Case "gif","bmp","jpg","png":
Arr=getImageSize(IMGFile.Path)
imgH = Arr(2)
End Select
Set IMGFile=Nothing
Else
imgH = 0
End If
Set FSO=Nothing
End Function
End Class
IMGPath="Test.jpg"
Set PP = New ImgWHInfo
W = PP.imgW(Server.Mappath(IMGPath))
H = PP.imgH(Server.Mappath(IMGPath))
Set pp = Nothing
Response.Write("<img src=’"&IMGPath&"’ border=0><br>宽:"&W&";高:"&H)
%>
下面是js获取图片大小并控制大小的例子.
<HTML>
<HEAD>
<TITLE>演示图片等比例缩小</TITLE>
<script>
function Wa_SetImgAutoSize(img)
{
//var img=document.all.img1;//获取图片
var MaxWidth=200;//设置图片宽度界限
var MaxHeight=100;//设置图片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比
var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比
alert("test"+img.offsetHeight+img.fileSize);
if(img.offsetHeight>1) alert(img.offsetHeight);
if(img.readyState!="complete"){
return false;//确保图片完全加载
}
if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
function CheckImg(img)
{
var message="";
var MaxWidth=1;//设置图片宽度界限
var MaxHeight=1;//设置图片高度界限
if(img.readyState!="complete"){
return false;//确保图片完全加载
}
if(img.offsetHeight>MaxHeight) message+="\r高度超额："+img.offsetHeight;
if(img.offsetWidth>MaxWidth) message+="\r宽度超额："+img.offsetWidth;
if(message!="") alert(message);
}
</script>
</HEAD>
<BODY>
<img src="images/frequency.gif" border=0 id="img1" onload="CheckImg(this);">
<br>
<input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>
网站改版了怎么办?很多网站在改版的时候，非常担心用户习惯。
有的担心是合理的，有的担心是多余的。担心之前，先搞清两个问题：
首先，你有没有老用户？有多少老用户？如果网站本身就是提供给walk-up-and-use（走来即用）类型的用户的，比如某某博物馆门口的参观指导系统，它完全就是面向新用户的，根本就没有老用户。另外，有的网站本身很烂（可能是产品烂也可能是易用性烂），来看一眼的人就不会再回来，那么随便怎么改都不会有老用户习惯的问题。
其次，用户使用该网站的频繁程度，如果是一个频发事件，每天、每周、每月都会上去看那么一两次，改版确实要考虑老用户的习惯问题。比如Gmail、豆瓣、MSN、新浪等。
但也有不少网站，尤其是电子商务类网站，用户并不是每月都会上来的，而是到了有需求的时候才上来，比如当当，比如携程，比如PPG。这种网站，用户甚至记不住你的主色调，更不用说你的预订流程有哪些步骤了（能记住你的域名就不错了）。
相关文章
php错误提示 open_basedir restriction in effect 解决
今天在帮助一个朋友配置一台服务器时发现网站配置好了缓存目录读写不成功，在打开错误时发现提示 Warning: file_exists() [function.file-exists]: open_basedir restr...2016-11-25- 那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
mysql提示Changed limits: max_open_files: 2048 max_connections: 1910 table_cache: 64的解决
在windows下安装Mysql系统日志出现max_open_files: 2048 max_connections: 510 table_cache: 764 类似错误是因为 max_connections 最大连接数和max_open_files、table_cache 不匹配。适当的降低max_connections 或调...2014-05-31- 这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 本文介绍了jQuery实现用户输入自动完成功能的方法。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-19
- 有时候我们需要在登陆表单有一些提示语言，比如“请输入用户名”和“请输入密码”等语言，通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识，对js实现输入框提示相关知识感兴趣的朋友一起学习吧...2016-01-14
详解pycharm的python包opencv（cv2）无代码提示问题的解决
这篇文章主要介绍了详解pycharm的python包opencv（cv2）无代码提示问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-29如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本，下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09- 这篇文章主要为大家分享了js滑动提示效果代码，实现方法简单，感兴趣的小伙伴们可以参考一下...2016-03-12
- 这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-12
- 这篇文章主要为大家详细介绍了原生JS实现登录框邮箱提示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-18
- 这篇文章主要为大家详细介绍了C#自定义IP输入框控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了jQuery文字提示与图片提示效果实现方法,涉及jQuery针对鼠标事件的响应与页面元素动态操作相关技巧,需要的朋友可以参考下...2016-07-06
- C# Hook钩子实例代码之截取键盘输入，需要的朋友可以参考下...2020-06-25
- 本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧...2017-01-09
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17- 这篇文章主要介绍了Element Tooltip 文字提示的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
Notice:undefined index ..错误提示解决方法
这句是在php开发中会碰的一些问题，看这提示我们都知道是变量未定义，那么下面来解决Notice:undefined index方法, 一，这个因为是变量未定义我们只要找到相关的位置加...2016-11-25