jQuery随机切换图片的小例子


Posted in Javascript onApril 18, 2013
 <!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>
    <title></title>
    <style type="text/css">
    img
    {
       width:200px; height:200px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                var num = Math.floor(Math.random() * 8 + 1);
             $('img').attr('src','picture/'+num+'.jpg')
            })
        })
    </script>
</head>
<body>
<img src="picture/1.jpg" id="img1" />
<input id="btn1" type="button" value="变换" />
</body>
</html>
Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
Javascript获取某个月的天数
May 30 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
JS隐藏参数post传值实例
Apr 18 #Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 #Javascript
JS打开新窗口的2种方式
Apr 18 #Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 #Javascript
JS操作图片(增,删,改) 例子
Apr 17 #Javascript
You might like
php中的比较运算符详解
2013/10/28 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php生成二维码
2015/08/10 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
关于旷工的检讨书
2014/02/02 职场文书
校庆标语集锦
2014/06/25 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
党校党性分析材料
2014/12/19 职场文书
社会实践活动报告
2015/02/05 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Flask response响应的具体使用
2021/07/15 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers