js一些简单的效果

文字变换颜色 1 <script>
 2 var cc = [‘purple‘,‘white‘,‘black‘,‘yellow‘,‘gray‘,‘blue‘,‘green‘,‘red‘];
 3 var i = 0;
 4 function myc(){
 5     var u= document.getElementsByTagName(‘h1‘)[0];
 6     u.style.color=cc[i++];
 7     if(i>=cc.length-1){
 8         i=0;
 9         }
10 }setInterval(myc,100);
11 </script>

网页中的时钟效果 两个aa是对应的

1 function aa(){
2     document.getElementById(‘my‘).innerHTML = new Date().toLocaleString();
3  }      setInterval(aa,1000);

今天是: 2015年4月16日 上午10:44:36 星期四

1 今天是: <span id="jnkc" class="qqzcdtt"><script>document.write(new Date().toLocaleString()+‘ 星期‘+‘日一二三四五六‘.charAt(new Date().getDay()))</script></span>

分时问候

1 var d=new Date();
2 var h=d.getHours();
3 if(h>8 && h<=12){
4     document.write(‘上午好‘);
5 }else if(h>12 && h<=18){
6     document.write(‘下午好‘);
7 }else{
8     document.write(‘晚上好‘);
9 }

计算平方数   平方也可以改成pf或者其他的英文  pf为函数名以后可以直接调用平方pf(); i为形参 函数里面一看到return立即结束

function 平方(i){    return;    程序立即结束
    return i*i;
}
alert(平方(100));  调用函数

两种定时器

1 setTimeout(‘alert(100)‘,2000); /*2s后输出100*/
2 setInterval(‘alert(200)‘,2000);/*每隔2s输出200*/

确认框:

1 张三:<a href="" onClick="return confirm(‘是不是要删除张三‘)">删除 </a>

提示确认框一

1 if(confirm(‘是否要打开百度网‘)){
2     location.href=‘http://www.baidu.com‘;
3 }

提示确认框二

1 var f=confirm(‘是否要打开百度网‘)
2 if(f){
3     location.href=‘http://www.baidu.com‘;
4 }

输入框

1 var i=prompt(‘请输入年龄‘,18);
2 if(i<18){
3     alert(‘未成年不允许上网‘);
4 }
5    else{
6         alert(‘已成年允许进入‘);
7         location.href=‘http://www.baidu.com‘;
8 }

返回0-1之间的随机小数             Math是抽象对象,不能实例化也就是不行yy=new Math():

1  for(i=0;i<=10;i++){
2      document.write(Math.random()+‘<br>‘);
3  }

// Math 数学对象
//alert(Math.abs(-90));//90 取绝对值
//alert(Math.PI);              
//alert(Math.round(4.1));  四舍五入
//alert(Math.round(4.5));
//alert(Math.round(-4.1));
//alert(Math.round(-4.5));

//alert(Math.floor(2));     取整数,小于这个数的最大整数
//alert(Math.floor(2.9));

//alert(Math.ceil(2));//2
//alert(Math.ceil(2.3));//3 取整数,大于这个数的最小整数
//alert(Math.ceil(2.9)); //3

//Math.random(); 返回1-0 之间的随机小数

返回0-3之间的整数,让背景颜色不断变换

 1 var c = Math.round(Math.random()*3);//0-3 之间的随机整数
 2 if(c==0){
 3     document.bgColor = ‘red‘;
 4 }else if(c==1){
 5     document.bgColor = ‘blue‘;
 6 }else if(c==2){
 7     document.bgColor = ‘green‘;
 8 }else{
 9     document.bgColor = ‘purple‘;
10 }
时间: 2024-10-29 09:10:10

js一些简单的效果的相关文章

vue.js实现简单增删效果

Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单.在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的.重复的与易错的.Vue.js 拥抱数据驱动的视图概念.通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.一旦创建了绑定,DOM 将与数据保持同步.每当修改了数据,DOM 便相应地更新.这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起.这让我们的代码更容易撰写.理解与维

原生js实现简单打字机效果

快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

JS实现简单的图片轮转

+(UIImage*)createImageFromView:(UIView*)view { //obtain scale CGFloat scale = [UIScreen mainScreen].scale; 开始绘图,下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.wi

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

[JS,NodeJs]个人网站效果代码集合

上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分效果, 那个走路的孩子技术很简单,和以前的春分秋分Google的Doodles类似,就没有模仿,换成一个头像] 3.视屏拼图 4.百度地图api简单应用集合 5.财经数据 6.天气预报 [nodejs搭建,express框架,nodejs简单页面抓取,JS

JS中图片飞飞效果

当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要是为了解决在页面出现滚动条的情况下,图片还能够跟随鼠标移动.然后再鼠标移动的时候,延时给每一个图片设置定位的left和top距离就OK了.HTML和CSS代码如下: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v