html、js效果图及源代码

最新推荐文章于 2022-07-12 19:38:17 发布

shursulei

最新推荐文章于 2022-07-12 19:38:17 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： html 源代码

本文链接：https://blog.csdn.net/shursulei/article/details/56280199

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、改变鼠标的形状
源代码：

<html>
<head>
<title>改变鼠标的形状</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="#" style="cursor:url(note.ico);">将鼠标移动到我上，鼠标指针将变形</a>
</body>
</html>
<!--代码中的note.ico图片要自己找-->

2、使用删除线样式标注商品特价


<html>
<head>
<title>使用删除线样式标注商品特价</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="bike.jpg" width="200" height="165"><br> 
&nbsp;&nbsp;
<span style="text-decoration:line-through">原价：796（元）</span>
<br>&nbsp;
<span>现价：399（元）</span>
</body>
</html>

效果图：这里写图片描述

3、从身份证号码中获取出生日期

  <title>从身份证号码中获取出生日期</title>
    <script language="javascript">
    function checkRealName(){
        var str=form1.realName.value;           //获取输入的真实姓名
        if(str==""){        //当真实姓名为空时
            alert("请输入真实姓名！");form1.realName.focus();return;
        }else{              //当真实姓名不为空时
/*验证是否为汉字*/         var objExp=/[\u4E00-\u9FA5]{2,}/;   //创建RegExp对象

            if(objExp.test(str)==true){     //判断是否匹配
                alert("您输入的真实姓名正确！");
            }else{
                alert("您输入的真实姓名不正确！");
            }
        }
    }
    </script>
  </head>

  <body>
  <center>
  <form name="form1" method="post" action="">
  请输入真实姓名：<input name="realName" type="text" id="realName">
  <input name="Button" type="button" onClick="checkRealName()" value="检测">
  </form> 
  </center>

同理，验证；

/*验证email*/
var str=email;
var expression = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
var objExp = new RegExp(expression);
if(objExp.test(str) == true){
return true ;
}else
return false;


/*验证电话号码*/
var str=tel;
var expression=/(\d{3}-?\d{8}|(\d{4}-)(\d{7})/;
var objExp = new RegExp(expression);
if(objExp.test(str) == true){
return true ;
}else
return false;


/*验证是否是汉字*/
var str=name;
var expression = /[\u4E00-\u9FA5/;
var objExp = new RegExp(expression);
if(objExp.test(str) == true){
return true ;
}else
return false;


/*验证身份证号码*/
var str=NO;
var expression = /\d{17}[\d|X]|\d{15}/;
var objExp = new RegExp(expression);
if(objExp.test(str) == true){
return true ;
}else
return false;


/*验证网址是否合法*/
var str=url;
var expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?/;
var objExp = new RegExp(expression);
if(objExp.test(str) == true){
return true ;
}else
return false;


/*限制字符串长度str为指定字符串，digit为指定最大长度*/
function checkstr(str,digit)
{
var n=0;
for(int i=0;i<str.length;i++)
{
var leg=str.charCodeAt(i);
if(leg>255)
{
n+=2;
}else
n+=1;
}
if(n>digit)
{
return true;
}else
return false;
}

4、实时显示系统时间

<html>
  <head>
    <title>实时显示系统时间</title>
    <script language="javascript">
    function realSysTime(clock){
        var now=new Date();         //创建Date对象
        var year=now.getFullYear(); //获取年份
        var month=now.getMonth();   //获取月份
        var date=now.getDate();     //获取日期
        var day=now.getDay();       //获取星期
        var hour=now.getHours();    //获取小时
        var minu=now.getMinutes();  //获取分钟
        var sec=now.getSeconds();   //获取秒钟
        month=month+1;//在js中的月份是从0开始的
        var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
        var week=arr_week[day];     //获取中文的星期
        var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec;   //组合系统时间
        clock.innerHTML="当前时间："+time;   //显示系统时间
    }
    window.onload=function(){
        window.setInterval("realSysTime(clock)",1000);  //实时获取并显示系统时间
    }
    </script>
  </head>

  <body>
    <div id="clock"></div>
  </body>
</html>

shursulei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html、js效果图及源代码

1、改变鼠标的形状源代码：<html><head><title>改变鼠标的形状</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><a href="#" style="cursor:url(note.ico);">将鼠标移动到我上，鼠标指针将变形</a><
复制链接

扫一扫