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

首先什么是回文字?
回文字就像 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("冬寒-静烟临碧树,残雪背晴楼。冷天侵极戍,寒月对行舟。舟行对月寒,戍极侵天冷。楼晴背雪残,树碧临烟静。-寒冬")

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

随机数Math.random()

html5本地存储-localStorage

html5本地存储有两类。
localStorage -一般保存在客户端计算机,在移动端浏览器中,一般情况是永久保存
sessionStorage – 数据保存在当前会话中,或者当前窗口,当前窗口新建的窗口,相关联的标签

1、在使用之前先检查浏览器是否可以支持Web Storage。

if(window.localStorage){ 
} 
if(window.sessionStorage){
}

2、赋值和调取

var userData={
name:"www",
account:"san",
level:2,
disbled:true
}
//存储userData数据
localstorage.setItem("userData",JSON.stringify(userData));

//读取userData并赋值给新变量
var newUserData=JSON.parse(localStorage.getItem("userData"))

 

3、删除数据

//删除本地存储的key为那么的Item
localStorage.removeItem("name");

//删除localStorage所有key/value键值对,Item
localStorage.clear()

 

PS:JSON.stringify()把字符串转换成对象;JSON.parse()把对象转换成原来的数据格式。

手机App实例:

/**
* localStorage保存数据
* @param String key 保存数据的key值
* @param String value 保存的数据
*/
function setLocVal(key,value){
window.localStorage[key] = value;
}

/**
* 根据key取localStorage的值
* @param String key 保存的key值
*/
function getLocVal(key){
if(window.localStorage[key])
return window.localStorage[key];
else
return “”;
}

/**
* 清除缓存
* @param String key 保存数据的key,如果不传清空所有缓存数据
*/
function clearLocVal(key){
if(key)
window.localStorage.removeItem(key);
else
window.localStorage.clear();
}

a页面存储

function openDetails(i){
var Arr=[‘投保指南’,’投保流程’,’常见问题’];
setLocVal(‘mName’,JSON.stringify(Arr[i]));
setLocVal(‘mNo’,JSON.stringify(i)); //
openNewWin(‘wytb’, ‘wytb.html’);
}

b列表页面接收

var mN = JSON.parse(getLocVal(“mN”));
var mNn = JSON.parse(getLocVal(“mNo”));

function showGoods(){
$toast(‘数据加载中…’);
if(mNn==2){
$closeToast();
$.getJSON(mN, function(data){
if (status==0&&data&&data.data.length) {
$closeToast();
var arrData = data.data;
var tmpl = ‘<div class=\”ub ub-ac ub-pc ub-pj uinn umar-t c-wh\” ontouchstart=\”zy_touch(\’t-org\’)\” onmousedown=\”zy_touch(\’t-org\’);\” onclick=\”openDetails(\’${href}\’);\”>’
+'<div class=”ulev-app2″>${title}</div>’
+'<div class=”arrow ub-img umwh”>’
+'</div>’
+'</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}else{
$.getJSON(mN, function(data){
if (data&&data.length) {
$closeToast();
var arrData = data;
arrData=JSON.stringify(arrData);
arrData=arrData.replace(/height.*?\/>/gi,”\/>”);
arrData=JSON.parse(arrData);
var tmpl = ‘<div class=\”uba b-gra ub ub-ver c-wh uinn umar-t\”>’ +
‘<div class=\”ubb b-gra ub uinn3\”>’ +
‘<div class=\”t-org ulev-app2\”>${title}</div>’ +
‘</div>’ +
‘<div class=\”uinnh1 t-gra1 ulev-app2 c-wh\”>’ +
‘<span>${text}</span>’ +
‘</div>’ +
‘</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}
}

//打开详情页面
function openDetails(url){
setLocVal(‘mHref’,JSON.stringify(lPath+’?url=’+url));//存值
openNewWin(‘wytb_detail’,’wytb_detail.html’);
}

//手机相册调取
function Imgclick(){
var Img = document.getElementsByTagName(‘img’);
for (var i = 0; i < Img.length; i++) {
Img[i].onclick=function(){
uexImageBrowser.open([this.src]);
}
}
}

 

c页面-详情页面

function sortList(){
$$(‘Info’).innerHTML=””;
$toast(‘数据加载中…’);
$.getJSON(liPath, function(data){
$closeToast();
if (data!=0) {
data.content=data.content.replace(/FONT-SIZE: 12pt/gi,””);

//详情模板

var liPath = JSON.parse(getLocVal(“mHref”));
var tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
+'<div class=”t-org ulev-app2″>’+data.title+'</div>’
+'</div>’
+'<div class=”uinnh1 t-gra1 ulev-app2 c-wh”>’
+'<span>’+data.content+'</span>’
+'</div>’;
$$(‘Info’).innerHTML=tmpl;
}
else {
$$(‘Info’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}

 

 

 

 

1、表格隔行变色且隔td单元格变色,2、多色的th

1、表格隔行变色且隔td单元格变色

感谢 boahy给的思路,让我抛却了各种想的索引值的写法。不然还得在索引值的大坑里面扑腾下去。
td,行和列交叉有重色块。 需要看每行的颜色。(这个地方的颜色要用
“各一行一种样式
Boahy 16:35:30
写两种样式就够了
Boahy 16:35:42
然后交替显示每种样式
Boahy16:35:55
哪里有什么叠加”)“

为了表现明显些,我准备把这张图由1 变成2.
12014-07-25_094755
22014-07-25_095722

td颜色 第一行 32 32 32, 隔行 21 21 21(从每行来看,再找共同点奇偶行相同)

//td颜色
$('.tb tr:even td:even,.tb tr:odd td:odd').css({'background':'#ddd'});
$('.tb tr:even td:odd').css({'background':'#ccc'});

.tb tr:even td:even    tr:even 偶数行里面的 偶数td 和 奇数行里面的 奇数 td
偶数第一行是tr th行。实际有表现的是 偶数第二行 标注黑色字号的2 1 2 1 中的 22 为#ddd是偶数td。

.tb tr:odd td:odd    tr:odd  奇数行里面的 奇数td  32 32的2

$(‘.tb tr:even td:odd’).css({‘background’:’#ccc’})    偶数行的 奇数td。

以往做的时候多考虑,奇偶行数,这次把奇偶行数tr和奇偶表格td全考虑到了。

(私以为不会有人会遇到这么奇葩的表格)

2、多色的th ,这个用了两种方法

① 利用th索引值,添加递增样式。

 //th 的颜色
        $('.tb th').each(function(){
                        i=$(this).index();
                        $(this).addClass('tab_th'+i);
        });

所需要建立多个class

css文件

.tb  .tab_th0{ background:#64badc;}
.tb  .tab_th1{ background:#fdd059;}
.tb  .tab_th2{ background:#ec985f;}
.tb  .tab_th3{ background:#ec61ae;}
.tb  .tab_th4{ background:#7ae85a;}
.tb  .tab_th5{ background:#7b9ca3;}
.tb  .tab_th6{ background:#f4c377;}
.tb  .tab_th7{ background:#ca837b;}

麻烦,不过有可能其他项目会用到

② 利用数组存储背景颜色赋值 √  这个好用,有多个表格也不怕了

function tb_th(id){
	//th颜色
		var Arr=['#64badc','#fdd059','#ec985f','#ec61ae','#7ae85a','#7b9ca3','#f4c377','#ca837b'];
		for(var j=0 ;j<Arr.length;j++){
			$(id+' tbody tr th:eq('+j+')').css({'background':Arr[j]});
		};
	};
	//表格添加th背景色
	tb_th('#tb1');
	tb_th('#tb2');

ps:要保证Arr的颜色值个数= 最大的表格th个数。Arr.length  >=   th.length

demo1(class名字)

demo2(数组)

选项卡-左右箭头

3<!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>左右点击选项卡</title>
<style type="text/css">
#box{width:300px; margin:0 auto;}
#box input{ padding:4px 10px; background:#ccc; display:inline-block;}
#box input.on{ background:red;}
#box span{color:red; cursor:pointer;}
#box div{ width:298px; border:1px solid #000; display:none; height:200px;}
</style>
<script>
window.onload=function(){
	var oBox=document.getElementById('box');
	var oBtn=oBox.getElementsByTagName('input');
	var oCon=oBox.getElementsByTagName('div');
	var oPrev=document.getElementById('prev');
	var oNext=document.getElementById('next');
	var iNow=0;

	for(var i=0;i<oBtn.length;i++){
		oBtn[i].index=i;
		oBtn[i].onmouseover=function(){
			iNow=this.index;
			tb();
		}	
	}
	oPrev.onclick=function(){
		iNow--;
		if(iNow==-1){
			iNow=2;
		}
		tb();
	}
	oNext.onclick=function(){
		iNow++;
		if(iNow==3){
			iNow=0;
		}
		tb();
	}
	function tb(){
		for(var i=0;i<oBtn.length;i++){
			oBtn[i].className='';
			oCon[i].style.display='none';
		}
		oBtn[iNow].className='on';
		oCon[iNow].style.display='block';
	}

}

</script>
</head>

<body>
<div id="box">
<input type="button" value="菜单一" /><input type="button" value="菜单二" /><input type="button" value="菜单三" />
<span id="prev">←</span>  <span id="next">→</span>
<div style="display:block">12121212</div>
<div>22222222222</div>
<div>33333333333</div>
</div>
</body>
</html>

 Demo

弹性菜单-js

<!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>弹性菜单</title>
<style>
*{ padding:0; margin:0; list-style:none;}
#ul1{ width:800px; position:relative; margin:10px auto; background:#9C0; height:30px;}
#ul1 li{ width:200px; height:30px; line-height:30px; text-align:center; float:left; z-index:2; position:relative;}
#ul1 li a{ display:block}
#ul1 li.box{ position:absolute; background:#ff0; left:0; top:0; z-index:1;}
</style>
</head>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
var oBox=aLi[aLi.length-1];

for(var i=0;i<aLi.length-1;i++){
aLi[i].onmouseover=function(){
startMove(oBox,this.offsetLeft);
};
}
};
var i=0;
function startMove(obj,iTarget){
obj.speed=obj.speed||0;
obj.left=obj.left||obj.offsetLeft;

clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.speed+=(iTarget-obj.left)/5;
obj.speed*=0.7;
obj.left+=obj.speed;
obj.style.left=Math.round(obj.left)+'px';

if(Math.abs(obj.speed)<1&&obj.offsetLeft==iTarget){
clearInterval(obj.timer);
}
document.title=i++;

},30);
}
</script>
<body>
<ul id="ul1">
<li><a href="http://www.gaigaiming.com">首页</a></li>
<li><a href="javascript:;">作品</a></li>
<li><a href="javascript:;">用户</a></li>
<li><a href="javascript:;">论坛</a></li>
<li class="box"></li>
</ul>
</body>
</html>

 

利用定位,运动展示弹性菜单。

先清再定时器。

DEMO

吸顶菜单

知识点:
$(‘.nav’).offset():获取匹配元素在当前视口的相对偏移 offset().top offset().left
返回对象包含两个属性:top和left。 此方法只对可见元素有效

$(‘.nav’).width():取得匹配元素的当前计算的宽度值
参数:设定css中的width值,可以是字符串或者数字,还可以是一个函数。返回要设置的数值。

$(‘p’).width() 获取第一段的宽度
把所有的段落的宽度设为20
$(‘p’).width(20);

函数接受两个参数,第一个参数是元素在原先集合中的做因为只,第二个参数为原先的宽度。
function(index,width)

以10像素的复读增加p元素的宽度

1
 
$('button').click(function(){
$('p').width(function(n,w){
return w+10;
})
})

$(window).scroll()|| $(‘.div’).scroll 当页面滚动条变化时,执行的函数
scrollTop() 获取匹配元素相对滚动提条顶部的偏移
demo