href与src的区别

 

SRC (Source)
src用于置换元素[1],即使说这个元素的内容通过src的地址获得,且不受css样式限制。比如


1
2
3
4
<span class="nt">&lt;script /&gt;</span>
<span class="nt">&lt;img</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;video</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;object</span> <span class="nt">/&gt;</span>

等。浏览器在解析到此处时会暂停所有渲染,加载直到此处内容被加载完成。
所以建议<script>放置在页面底端。比如:


1
&lt;script src="dom1.js"&gt;&lt;/script&gt;

HREF (HyperText Reference)
href 用于建立链接关系,比如


1
&lt;a&gt;, &lt;link&gt;

元素,浏览器在解析到此处时之道这里是个外部链接(或锚点)而并不需要加载这个链接的内容。因此页面解析不会被暂停。比如:


1
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#yourAnchor"</span><span class="nt">&gt;</span>Click me<span class="nt">&lt;/a&gt;</span>
URL (Uniform Resource Locator)
狭义来讲,在这里url代表了CSS的一个数据类型,它指定了一个数据的链接位置。通常的用法是用url()函数。比如


1
2
3
#your-element{
  background-image:url(http://placekitten.com/500/500);
}

There is a differentiation between src and href and they can’t be used interchangeably. We usesrc for replaced elements while href for establishing a relationship between the referencing document and an external resource.
href (Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute. When we write:
The browser understands that this resource is a stylesheet and the processing parsing of the page isnot paused (rendering might be paused since the browser needs the style rules to paint and render the page). It is not similar to dumping the contents of the css file inside the style tag. (Hence is is advisable to use link rather than @import for attaching stylesheets to your html document.)
src (Source) attribute just embeds the resource in the current document at the location of the element’s definition. For eg. When the browser finds

The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the script tag. Similar is the case with img tag. It is an empty tag and the content, that should come inside it, is defined by the src attribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]

引用
http://stackoverflow.com/questions/3395359/difference-between-src-and-href

检测回文字中国古代回文诗

首先什么是回文字?
回文字就像 eye 和 12321 77888877之类对称的 人美赏美人
因为回文字左右调换后,是相同的,那么就判断是否相等,相等则是回文字,不相等则否。
比如 以下运行结果
palindrome(“eye”) 应该返回一个布尔值
palindrome(“eye”) 应该返回 true.
palindrome(“race car”) 应该返回 true.
palindrome(“not a palindrome”) 应该返回 false.
palindrome(“A man, a plan, a canal. Panama”) 应该返回 true.
palindrome(“never odd or even”) 应该返回 true.
palindrome(“nope”) 应该返回 false.
palindrome(“almostomla”) 应该返回 false.
palindrome(“My age is 0, 0 si ega ym.”) 应该返回 true.
palindrome(“1 eye for of 1 eye.”) 应该返回 false.
palindrome(“0_0 (: /-\ 🙂 0-0”) 应该返回 true.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <script type="text/javascript">
  function palindrome(str) {
    console.log(str);
    // 请把你的代码写在这里
    var str1 = str.replace(/[\ |\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|"|\'|\,|\.|\<|\.|\>|\/|\?]/g,"");
    var str2 = str1.toLowerCase();
    console.log(str1);
    var arr1 = str2.split("").reverse().join("");//先分隔成数组,再把数组reverse,然后再把数组元素放进一个字符串中。split把字符串转数组,比如“12345”--》[1,2,3,4,5]--->reverse--->[5,4,3,2,1].join-->"54321"
    if(arr1===str2){
      return true
    }
        return false;
  }



  palindrome("1 eye for oF 1 eye.");  palindrome("冬寒-静烟临碧树,残雪背晴楼。冷天侵极戍,寒月对行舟。舟行对月寒,戍极侵天冷。楼晴背雪残,树碧临烟静。-寒冬")

喔唷 当然中国古代也有回文诗,是倒着念,也会成为诗词。
比如
五绝回文:
特点:全诗每句五字,原诗为五绝格式,然后可逆读成诗。
《冬寒》作者:陆龟蒙
静烟临碧树,残雪背晴楼。
冷天侵极戍,寒月对行舟。
倒着读:
舟行对月寒,戍极侵天冷。
楼晴背雪残,树碧临烟静。

不定宽度的div始终居中(css方式)

//需求:ul不能定具体宽度,只能根据li的个数来计算宽度。
22


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
&lt;!DOCTYPE HTML&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;title&gt;特殊性&lt;/title&gt;

&lt;style type="text/css"&gt;

*{padding:0; margin:0;}

ul,li{ list-style:none;}

.wrap{ float:left; position:relative; left:50%;}

.wrap ul{ background:#f00; height:30px; line-height:30px; left:-50%; position:relative;}

.wrap ul li{ float:left;}

.wrap ul li a{ color:#fff; display:block; padding:0 10px;}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="wrap"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

 

 

 

//可以实现不定宽度居中,可是元素左右两侧空白宽度之和(绿色箭头部分的)要大于ul本身不定宽度元素的宽度。不然就会出现滚动条。

//so不建议使用,用js解决吧,纠结的同学们

clientX、 screenX和pageX

1
2
3
4
5
6
7
8
9
10
11
12
document.onclick = function(evt){

    var e = evt || window.event;
    // 浏览器可视区域左上角的坐标 可视区域坐标 client clientX
    box1.innerHTML=e.clientX+","+e.clientY;
   
    // 电脑的屏幕坐标,screen 屏幕坐标
    box2.innerHTML = e.screenX+","+e.screenY;

    // 根坐标,有些版本不兼容可用clientY+scrollTop  (IE8)
    box3.innerHTML = e.pageX+","+e.pageY;
}

viewport

<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
appcan header内的自适应

Viewport语法

 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 

target-densitydpi=device-dpi(在csdn中线有人在2013年就说这个不支持webkit了,腾讯的博客有在2012年还探讨,在使用appcan的时候制作appweb的时候会出现乐视华为三星宽屏手机在UC浏览器的兼容问题,去掉这个可以解决)
使用

width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

height:和width相应,指定高度。

initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放。
参考资料
http://isux.tencent.com/mobile-development-essential-knowledge.html
http://bbs.csdn.net/topics/390403828

其中解决的过程中使用了rem,然并卵,又换成了em
使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

rem px em pt 需要了解

随机数Math.random()

Appcan使用遇到问题和方法整理

1、抽屉页面效果注意点
退回上一页(抽屉里面的返回上一页)
<div class=”umw4 ub ub-ac ub-pc” ontouchstart=”zy_touch(‘btn-act’)” onclick=”closeWin();”>
<div class=”t-btn-a1 ub-img uwh-tBtn”></div>
</div>
抽屉页面(修改完毕后,只能放在连接内部有用)
Ⅰ. right.html(首页)
Root要改掉 window.uexOnload = function(type){
if (!type) {
//uescript(‘root’,’openPover()’);
uescript(‘right_drawer’,’openPover()’);
zy_con(“content”, “right_content.html”, 0, $$(“header”).offsetHeight);
var plat = uexWidgetOne.getPlatform();
Ⅱ. right_drawer.html(可以预览的抽屉效果,内容是清除条件和确认。)
Ⅲ. right_content.html(right的content内容)
Ⅳ. Filer.html(抽屉内的选项)
当出现抽屉里面的效果有滚动条的时候,变header为
<!DOCTYPE html>
<html class=”um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px”>
<head>
<title></title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”target-densitydpi=device-dpi,initial-scale=1″>
<link rel=”stylesheet” href=”css/ui-on.css”>
2、一般页面返回上一页(系统默认)
<!–按钮开始–>
<div class=”ub btn btn-l”>
<div class=”btn-al”>
</div>
<div class=”btn-ac ub ub-ac ulim uinn1″ onmousedown=”zy_touch(”);” ontouchstart=”zy_touch(”)” onclick=”winClose();”>
返回
</div>
<div class=”btn-ar”>
</div>
</div>
3、修改页面内的元素名字,调取数据,可以直接F5预览,修改样式图片之类的,需要重新加载预览
4、鼠标按下去的效果用
<div class=”umw4 ub ub-ac ub-pc” ontouchstart=”zy_touch(‘btn-act’)” onmousedown=”zy_touch(‘btn-act’);” onclick=”winClose();”>
<div class=”t-btn-a1 ub-img uwh-tBtn”></div>
</div>
加class名,可以修改在按下去瞬间的样式,可以改变颜色和大小等。
5、get获取json值
zy_init();
var pageSize = 10;
var pageLen = 1;
var isLoading = false;
window.uexOnload = function(type){
if (!type) {
sortList();
// uexWindow.setBounce(“1”);
setPageBounce(1, function(){
//刷新
pageLen = 1;
sortList();
}, function(){ //加载更多
pageLen++;
sortList();
// alert(pageLen);
});
}
}

function sortList(){
$toast(‘数据加载中…’);
$.getJSON(‘http://10.1.97.139:18080/10000000/public/BDP/bdpservice?func=listAllProjects&body={“arg0″:”UN0366″,”arg1″:’ + pageSize + ‘,”arg2″:’ + pageLen + ‘,”arg3″:0}’, function(data){
$closeToast();
//$.getJSON(http://10.1.97.139:18080/10000000/public/PBD/”)
// $.getJSON(‘http://10.1.2.206:9090/xxxx/xxxx/default/soap?loginName=040021genglm&pass=ss’,function(data){
// alert(data.netLoginInfo.loginName);
isLoading = false;
resetBV(0);
resetBV(1);
if (data.status == ‘0’ && data.data && data.data.projectBasicInfoList.length) {
$closeToast();
var dataLen = data.data.projectBasicInfoList;
var tmpl = ‘<div class=”ub t-bla ulev0 ubb b-gra uinn5″ ontouchstart=”zy_touch(\’\’)” onclick=”openGoods(event);”>’ +
‘<div class=” b-gra ub-f1 uc-l1″>’ +
‘<div class=”ub ub-ver t-bla”>’ +
‘<div class=”b-gra uc-t1 umar-t”>${serialno}</div>’ +
‘<div class=”b-gra “>${money}3323</div>’ +
‘</div>’ +
‘</div>’ +
‘<div class=”ub-f1 ulev0″>’ +
‘ <div class=”ub ub-ver”>’ +
‘ <div class=” b-gra uc-t1″> U${countryCode}</div>’ +
‘<div class=” b-gra ulev0 t-orgs”>${projectWorkUserId}</div>’ +
‘<div class=” uc-b1 ulev-1″>${style}OA ${deathline}56天 USD</div>’ +
‘</div>’ +
‘</div>’ +
‘<div class=”ub-f1 uc-r1 ulev0″>’ +
‘<div class=”ub ub-ver t-bla”>’ +
‘<div class=” b-gra uc-t1″>部分收匯</div>’ +
‘<div class=” b-gra ulev-1 “>${statusDate}</div>’ +
‘<div class=” uc-b1 ulev-1″> ${projectWorkcorpId}</div>’ +
‘</div>’ +
‘</div>’ +
‘</div>’
var s = zy_tmpl(tmpl, dataLen, zy_tmpl_count(dataLen));
var d = document.createElement(‘DIV’);
d.innerHTML = s;
$$(‘sortList’).appendChild(d);
}
else {
if (pageLen == 1) {
$$(‘sortList’).innerHTML = ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’
}
else {
$toast(‘没有更多数据’, 2000);
}
}
});
}

function toFront(){
uexWidnow.bringToFront();
}

function openGoods(e){
if (isPhone && e.type == ‘click’)
return;
openNewWin(‘r_content’, ‘r_content.html’);
}
Post取值
function List(){
var tmpl;
$toast(“正在加载中”);
//浏览器http协议缓过来的关键字
var j=[
{‘key’:’questiontitle’,’type’:’0′,’value’:$$(“KeyWord”).value},
{‘key’:’currentPage’,’type’:’0′,’value’:pageLen},
{‘key’:’pageSize’,’type’:’0′,’value’:15}
];
$.getJSON(Lurl,function(data){
$closeToast();
isLoading = false;
resetBV(0);resetBV(1);
if (data.type == ‘0’ && data.data.items&&data.data.items.length){
var dataLen = data.data.items;
for(var i=0;i<dataLen.length;i++){
tmpl +='<ul ontouchstart=”zy_touch(\’btn-act\’)” onmousedown=”zy_touch(\’btn-act\’)” onclick=”openDetail(\”+dataLen[i].questionid+’\’)” class=”uc-t ubb ub b-gra t-bla ub-ac lis”>’
+'<li class=”ub-f1 ut-s”>’+dataLen[i].questiontitle+'</li>’
+'<li class=”tx-r t-dgra ulev-1″>’+dataLen[i].state+'</li>’
+'<li class=”listIcon lis-sw ub-img”></li>’
+'</ul>’
}
if(pageLen==1){
$$(“content0″).innerHTML=tmpl;
}else{
var child = document.createElement(‘div’);
child.innerHTML = tmpl;
$$(‘content0’).appendChild(child);
}
}else{
if(data.data.pageCount==0){
$$(‘content0’).innerHTML = ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’
}else{
$toast(“没有更多数据”,2000)
}
}
},’json’,function(e){
alert(“输入异常”);
},’POST’,j)}
6、应用生成地址D:\appcan\AppCanStudioEnterprise\Mobile-Applications
7、Svn导入文件要有.project dssam10013 打包才能成功
设置搜索引擎 安卓 sdksuit_3.0_0820_01
8、产品服务代码 列表-列表-详情
①function openDetails(i){
var Arr=[‘短期出口信用保险’,’中长期出口信用保险’,’海外投资/租赁保险’,’国内贸易信用保险’,’资信服务’,’担保’,’信保融资’,’理赔服务’]
setLocVal(‘pName’,JSON.stringify(Arr[i]));
setLocVal(‘pNo’,JSON.stringify(i)); //传值
openNewWin(‘adCon_list’, ‘adCon_list.html’);
}
②列表页面
var hNo = JSON.parse(getLocVal(“pNo”));//获得传值
function openDetails(i){
var ArrNo=[‘du’,’zh’,’h’,’g’,’z’,’d’,’x’,’l’];
//中小企业综合险无 短期出口信用保险 出口买方信贷保险无 中长期出口信用保险
var ArrTit=[
[‘index’,’zhbx’,’tdmfbx’,’tdhtbx’,’mfwybx’,’ckxybx-yx-bxd’,’ckxybx-fft-bxd’],
[‘index’,’ckmfxdbx’,’ckmfxdbx’,’zrzbx’],
[‘index’,’hwtz-gq-bx’,’hwtz-zq-bx’,’hwzlbx’],
[‘index’],
[”],
[‘index’],
[”],
[‘index’,’dxal’,’ywdy’]
];
if(hNo==4||hNo==6){
alert(“信保融资为空和资信服务为空”);
return “信保融资为空和资信服务为空”;
}
//setLocVal(‘href’,JSON.stringify(‘http://10.1.97.139:9090/dssam10007/public/product/’+ArrNo[hNo]+’_’+e));
setLocVal(‘href’,JSON.stringify(‘http://127.0.0.1:8087/xxx/xxx/product/’+ArrNo[hNo]+’_’+ArrTit[hNo][i]));
openNewWin(‘adCon_detail’, ‘adCon_detail.html’);
}
③详情页
var liPath = JSON.parse(getLocVal(“href”)); //获得传值
function sortList(){
$$(‘Info’).innerHTML=””;
$toast(‘数据加载中…’);
$.getJSON(liPath, function(data){
if (data!=0) {
$closeToast();
tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
+'<div class=”t-org ulev-app2″>${title}</div>’
+'</div>’
+'<div class=”uinnh1 t-gra1 ulev-app2″>’
+'<span>${text}</span>’
+'</div>’;
var s = zy_tmpl(tmpl, data, zy_tmpl_count(data));
$$(‘Info’).innerHTML=s;
}
else {
$toast(‘无数据’);
}
});
}
9、传值
setLocVal(‘path’,JSON.stringify(e)); 设置传值 变成JSON字符串 双引号
var liPath = JSON.parse(getLocVal(“path”)); 获取传值 变成对象
10、省略class
Ub ut-s
11、附件下载常用代码
function Down(e){
var Durl=’http://10.1.97.139:9090/dssam10007/public/BMsg/OpenSoldsPdfWS?path=’;
//Console.Log(Durl+e);
alert(Durl+e);
downloadFile(Durl,”1111.pdf”);
}

12、Zy-tmpl.js 截取字段

var ar=c.split(‘.’);
var res=d;
for(var key in ar)
if(ar[key].match(/.*sub:.*/)){
var ts = ar[key];
var tsar = ts.split(“:”);

if(tsar.length > 1){
var num = tsar[1];
var numar = num.split(‘-‘);
if(numar.length > 1){
res = res.substring(numar[0],numar[1]);
}else if(numar.length == 1){
res = res.substring(numar[0]);
}
}
}else{
res=res[ar[key]];
}
${workDate.sub:0-10} 0到10索引值
${workDate.sub:11} 索引值11之后
13、IOS android取值
var sVal=encodeURIComponent($$(“search”).value);
if(!isAndroid){
var sVal=$$(“search”).value;
}
14、文本分散对齐
iOS
.tx-w{text-align:justify;text-justify:distribute-all-lines; text-align-last:justify; display:inline-block;}
Android
15、如果打包成功后,仅在iOS上面安装验证失败,则考虑上传代码中,页面name有汉字或者有不可识别文件格式,例如.psd文件