自学web前端练手——js的onclick

最新推荐文章于 2022-12-01 00:05:42 发布
最新推荐文章于 2022-12-01 00:05:42 发布
阅读量599 收藏
点赞数
分类专栏： 自学web前端 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvshaoshishang/article/details/104676081
版权
本文记录了作者第一天自学JS的过程，通过onclick事件实现点击图片切换文字的效果，但目前仅能单次触发，尚未实现反复切换的功能。后续将继续完善代码。
摘要由CSDN通过智能技术生成

第一天学JS，目前只实现了单击一次图片使文字改变，没有实现重复切换，后续完善。

效果如下：
在这里插入图片描述
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title
最低0.47元/天 解锁文章
lvshaoshishang
关注
专栏目录
《前端》onclick= function() 、onclick= return function() 、return false的区别介绍。
BelleDiao的博客
05-21 1919
现在在做薪酬二期的。 οnclick="function()" 表示只会执行 function , 但是不会传回 function 中之回传值 onclick = "return function()" 则是 执行 function并传回 function 中之回传值。 <script> function doAlert() { var fail_this_check = true; if(fail_this_check) return false;
前端-常用点击事件获取元素的方式及onclick如何获取点击事件所在的元素
最新发布
weixin_58443158的博客
08-07 802
事件处理器来获取触发事件的元素。事件处理器会被传入一个事件对象（），该对象包含关于事件的所有信息，包括触发事件的元素。3、事件的处理程序：事件触发后要执行的代码（函数）事件公式：事件源.事件类型 = 事件的处理程序。在JavaScript中，可以通过给元素添加。获取到是哪个元素触发了事件。1、事件源：被触发的元素。当按钮被点击时，会触发。详看示例代码，如何在。
JavaScript浅显易懂(十)——onclick练习
qq_43799743的博客
06-07 185
不多说先上代码 很简单 适合新手练习 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ //清除默认样式 margin: 0; padding: 0; ..
前端js中的onclick点击事件
个人笔记
03-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 50px; background-color: skyblue; margin: 40px; } </style>
JavaScript使用事件onclick导致css样式失效问题
夜一
09-08 4007
问题：JavaScript使用事件onclick导致css样式失效 首先,我们用以下代码得到的是一个样式没有失效的红色”超链接”,如下图1 代码1： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title
在html中设置样式not方法,javascript – 在onclick事件中设置css属性
weixin_42620563的博客
06-25 223
而不是删除CSS样式,为什么不直接将它添加到被点击的对象？获取被点击对象的ID并使用它…$(document).on('click', '.listElement', function () {var clickEl = this.id; //ID of clicked object$('.listElement').not('#' + clickEl).css('font-weight', 'b...
自学web前端练手——js实现简易计算器
lvshaoshishang的博客
03-14 1179
用js实现了简易计算器（加减乘除）。 主要运用了eval（String）函数：可计算某个字符串，并执行其中的的 JavaScript 代码。string是必需，即要计算的字符串。返回值为通过计算 string 得到的值。 效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta chars...
自学web前端练手——js的图片切换
lvshaoshishang的博客
03-07 557
共有六张图片，按next按钮切换到下一张，按prev切换到上一张，可来回切换。 效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> ...
自学web前端练手——js的随机点名
lvshaoshishang的博客
03-10 1090
就是课堂随机点名器。 效果如下： 当点击开始点名后，名字数组里的名字就会以1毫秒1个飞速滚动起来。原谅我不会录动图_(:з」∠)_ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <...
自学web前端练手——js的单一按钮显示与隐藏
lvshaoshishang的博客
03-15 549
效果如下： 单一按钮显示与隐藏可来回切换 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单一按钮显示隐藏</title> <style type="text/css"> body,div,ul,li...
在元素中设置onClick属性方法
云端分布式搜索技术
05-15 1858
假设我有这样两个函数function test(){ var button = document.getElementById("bu"); button.setAttribute("onclick",checkCount()); }function checkCount(){ alert("test");} body内容：  
js中添加onclick
hjjk123的专栏
02-03 2255
无参数时：button.onclick = clickevent;clickevent是一个函数。这样在clickevent没有参数的时候是可以的，但在clickevent需要一个参数的时候，就不行了。有参数时：这时可以这样添加：button.attachevent("onclick", function(){clickevent(event, "params")}); 
事件绑定(onclick,onfocus,onblur)
jakelihua
12-01 2462
事件绑定,onclick,onfocus,onblur
最全的关于onclick跳转的代码总结
热门推荐
疯狂的小程序员
06-18 2万+
更多技术问题解决案例请访问：IT摆渡网 -- 一个IT实时在线问答平台,解决任何IT技术难题，无需等待，立马解决！--www.itbaiduwang.com 如果是本页显示可以直接用location,方法如下：     onclick="Go('hk_money.php');return false" 　　①onclick="javascript:wind
Web开发之JS事件
LWK 的专栏
03-10 711
本文根据慕课网教程整理：http://www.imooc.com/code/635 什么是事件JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。主要事件表
Web前端 | JavaScript（事件）
m0_61933976的博客
10-17 2989
Web前端 | JavaScript（事件）
js中button的onclick事件上送两个参数到后台，完整前后端代码示例
qq_28204711的博客
02-02 9332
前言 这次写博客的原因就是自己在学习过程中，想通过点击按钮，然后给后台传递更新表的参数，当时我查阅很多网上的文章，遇到了很多问题，基本上他们给出的方案都是很简单的解答，但是我的是根据后端返回的数据，动态的生成前端列表，所以那种简单的设置ID的方法不适用，我也费很大力气才解决的，所以，把完整的前后端代码都分享给大家，希望能够给大家带来帮助。 效果图 以上是最后的基本界面图，我的目标就是可以通过点击更新状态按钮，将列表中的任务加载日期和任务状态返回给后台，然后后台接收到数据后给前端返回success， 在执行
web基础学习笔记(五)之常用的事件:onload、onclick、onblur
weixin_44014196的博客
09-08 932
常用的事件： onload事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*onload事件的方法*/ function onloadFun() { al
《21天自学Visual C++》——Namir Clement Shammas著经典教程
"《21天自学教程——Visual C++》是SAMS出版的一本面向初学者的编程自学书籍，由Namir Clement Shammas撰写，沈官林、尚杰、钟向群翻译，并由沈官林和天峰进行校对。这本书通过21天的学习计划，引导读者掌握Visual ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值